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
34
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
62
Notion APIと学ぶNext.js
ak2ie
0
540
NestJSのはじめ方
ak2ie
0
140
フロントエンドでDDDやってみた
ak2ie
0
75
初心者がシビックテックに参加してみた
ak2ie
0
110
Firebase についてとことん語りたい
ak2ie
0
110
D3.jsでグラフを描いてみた
ak2ie
0
110
Flutterはじめます
ak2ie
0
150
Other Decks in Technology
See All in Technology
Lambda Web Adapterについて自分なりに理解してみた
smt7174
4
120
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Wasm元年
askua
0
150
rubygem開発で鍛える設計力
joker1007
2
220
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
900
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
120
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
180
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
220
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Speed Design
sergeychernyshev
32
1k
Docker and Python
trallard
44
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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を使うことで画像を埋め込むことができる