Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SVG完全に理解してグラフ書いてみた
Search
ak2ie
October 03, 2024
Technology
0
14
SVG完全に理解してグラフ書いてみた
スカラLT vol.1での発表内容です
ak2ie
October 03, 2024
Tweet
Share
More Decks by ak2ie
See All by ak2ie
Go言語CLIツールで生産効率UPした話
ak2ie
0
100
Goではじめるバックエンド開発
ak2ie
0
57
Notion APIと学ぶNext.js
ak2ie
0
470
NestJSのはじめ方
ak2ie
0
110
フロントエンドでDDDやってみた
ak2ie
0
71
初心者がシビックテックに参加してみた
ak2ie
0
100
Firebase についてとことん語りたい
ak2ie
0
100
D3.jsでグラフを描いてみた
ak2ie
0
100
Flutterはじめます
ak2ie
0
130
Other Decks in Technology
See All in Technology
Amazon CloudWatch Network Monitor 導入ガイド_デモ説明付き
yukimmmm
0
150
SREの前に
nwiizo
10
1.7k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
0
1.1k
利きプロセススケジューラ
sat
PRO
4
2.4k
家具家電付アパートの冷蔵庫をIoT化してみた!
scbc1167
0
140
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
130
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
330
Windows Autopilot Deployment by OSD Guy
tamaiyutaro
0
260
AWS パートナー企業でテクニカルサポートに従事して 3年経ったので思うところをまとめてみた
kazzpapa3
1
200
一休.comレストランにおけるRustの活用
kymmt90
3
650
全社横断データ活用推進のコツと その負債とのつき合い方
masatoshi0205
0
140
SREの組織類型に応じた リーダシップの考察
kenta_hi
PRO
0
510
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
We Have a Design System, Now What?
morganepeng
50
7.2k
RailsConf 2023
tenderlove
29
890
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
2k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
58
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Statistics for Hackers
jakevdp
796
220k
Transcript
SVG完全に理解して グラフ書いてみた スカラLT vol.1 2024年9月29日
あっきー エンジニア フロントエンド:Flutter バックエンド:TypeScript 趣味 お笑いYouTube見ること タイムマシーン3号 ラランド 自己紹介 @ak2ie_tech
グラフってよく使われてますよね
えっ、そんな簡単なこと? 😅 意外と難しかったんです... この夏アウトプットしたもの Y軸を固定表示して、横スクロールできるグラフを作りました!
グラフ Recharts フロントエンド React その他 SVG 使った技術
Rechartsとは? Reactで簡単にグラフをかけるライブラリ SVG 拡大縮小、アニメーション容易 スクロールなどは難しいことも シンプルな構文 折れ線グラフなら 👇️ カスタマイズが簡単 目盛りにアイコンを表示
100 ー 50 ー 0 ー スクロールするとY軸が消えてしまう 横スクロール
Y軸のSVG(画像)をコピーして 固定表示させよう!
100 ー 50 ー 0 ー 100 ー 50 ー
0 ー どうやってY軸を固定表示させるか Y軸をコピーして固定 ここだけ見える ー300 ー200 ー100 ー0 ー300 ー200 ー100 ー0
コピーする範囲を決める 座標系 SVGの座標系はY軸が下向き(左上原点) (0, 0) (50, 100) y x
コピー先での描画内容を決める viewBoxとは? どの範囲(左上座標)を どれくらいの大きさで表示させるのか viewBox=”0 0 200 200" viewBox=”25 25
50 50" ー300 ー200 ー100 ー0 (1000, 0) viewBox=”1000 0 ... ...." viewBox=”100 200 500 500" 100 100 中心:(50, 50) 半径:25
コピー先での描画 データURLとは? <img src=”URL” /> data:image/svg+xml.... SVG(画像) 小さなファイルをURLで表し 埋め込むことができる エンコード
埋め込み
デモ
まとめ 横スクロール時にY軸を固定表示したグラフ RechartsはReactで簡単にグラフをかけるライブラリ SVGはY軸が下向き viewBoxは表示範囲と大きさを決める データURLを使うことで画像を埋め込むことができる