SVG完全に理解してグラフ書いてみた

スカラLT vol.1での発表内容です

Transcript

1. SVG完全に理解して グラフ書いてみた スカラLT vol.1 2024年9月29日
2. あっきー エンジニア フロントエンド：Flutter バックエンド：TypeScript 趣味 お笑いYouTube見ること タイムマシーン３号 ラランド 自己紹介 @ak2ie_tech
3. グラフってよく使われてますよね
4. えっ、そんな簡単なこと？ 😅 意外と難しかったんです... この夏アウトプットしたもの Y軸を固定表示して、横スクロールできるグラフを作りました！
5. グラフ Recharts フロントエンド React その他 SVG 使った技術
6. Rechartsとは？ Reactで簡単にグラフをかけるライブラリ SVG 拡大縮小、アニメーション容易 スクロールなどは難しいことも シンプルな構文 折れ線グラフなら 👇️ カスタマイズが簡単 目盛りにアイコンを表示
7. 100 ー 50 ー 0 ー スクロールするとY軸が消えてしまう 横スクロール
8. Y軸のSVG（画像）をコピーして 固定表示させよう！
9. 100 ー 50 ー 0 ー 100 ー 50 ー 0 ー どうやってY軸を固定表示させるか Y軸をコピーして固定 ここだけ見える ー300 ー200 ー100 ー0 ー300 ー200 ー100 ー0
10. コピーする範囲を決める 座標系 SVGの座標系はY軸が下向き（左上原点） (0, 0) (50, 100) y x
11. コピー先での描画内容を決める 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
12. コピー先での描画 データURLとは？ <img src=”URL” /> data:image/svg+xml.... SVG（画像） 小さなファイルをURLで表し 埋め込むことができる エンコード 埋め込み
13. デモ
14. まとめ 横スクロール時にY軸を固定表示したグラフ RechartsはReactで簡単にグラフをかけるライブラリ SVGはY軸が下向き viewBoxは表示範囲と大きさを決める データURLを使うことで画像を埋め込むことができる