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
38
SVG完全に理解してグラフ書いてみた
スカラLT vol.1での発表内容です
ak2ie
October 03, 2024
Tweet
Share
More Decks by ak2ie
See All by ak2ie
Go言語CLIツールで生産効率UPした話
ak2ie
0
110
Goではじめるバックエンド開発
ak2ie
0
66
Notion APIと学ぶNext.js
ak2ie
0
550
NestJSのはじめ方
ak2ie
0
140
フロントエンドでDDDやってみた
ak2ie
0
78
初心者がシビックテックに参加してみた
ak2ie
0
110
Firebase についてとことん語りたい
ak2ie
0
110
D3.jsでグラフを描いてみた
ak2ie
0
110
Flutterはじめます
ak2ie
0
150
Other Decks in Technology
See All in Technology
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
740
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
610
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
CoRL 2025 Survey
harukiabe
0
140
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
150
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
200
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
250
Git in Team
kawaguti
PRO
3
350
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
220
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
How to Think Like a Performance Engineer
csswizardry
27
2k
Thoughts on Productivity
jonyablonski
70
4.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Scaling GitHub
holman
463
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Making Projects Easy
brettharned
119
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
4 Signs Your Business is Dying
shpigford
185
22k
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を使うことで画像を埋め込むことができる