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
560
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
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
2
3.7k
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
410
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
320
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
810
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
110
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
270
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
2
2.4k
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
1.9k
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
170
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
150
Featured
See All Featured
Site-Speed That Sticks
csswizardry
13
920
Mobile First: as difficult as doing things right
swwweet
225
10k
The Pragmatic Product Professional
lauravandoore
36
7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Practical Orchestrator
shlominoach
190
11k
Done Done
chrislema
185
16k
Documentation Writing (for coders)
carmenintech
75
5.1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Bash Introduction
62gerente
615
210k
How STYLIGHT went responsive
nonsquared
100
5.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
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を使うことで画像を埋め込むことができる