折れ線グラフ描画
SVG polyline が stroke-dashoffset で描かれ、続いて各頂点の点が順番にポップインして現れる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 月次推移を「描いて見せる」レポートの冒頭
- 7 点程度の少数データ
- ストーリー性のあるプレゼン風ダッシュボード
- 避ける場面
- 数百点の時系列（描画が遅く点が密）
- 頻繁に再描画されるリアルタイム表示
- 構成要素
- グリッド線
- 折れ線
- 頂点の点
- 月ラベル
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- キーボード
Tab で再生ボタンへ、Enter／Space で再生
- 支援技術
svg は role=img＋aria-label に月ごとの値を列挙（1月 30、2月 58…）。月ラベルは aria-hidden の見た目用。reduced-motion では描画と点の出現を省き最終形を即表示
- 動き
線が 1.2s ease-out で左から描かれ、400ms から 100ms 間隔で点が 300ms バウンスで現れる
デザインの要点
- dasharray／dashoffset は折れ線の実測長（約 259）に合わせる。大きすぎると描き始めが遅れ、等速に見えない
- 点は線が通過した 400ms 以降に 100ms 間隔で出す。線より先に点が出ると、線が点をなぞる絵になる
- 点の transform-origin は center にして 0→1 倍で出す。左上基点だと点が斜めに飛んで見える
- svg は role=img にして値を aria-label に列挙する。線の形は読み上げられないので数字で言い直す
コード（コピーして使えます）
<div class="lc-wrap">
<svg class="lc-svg" viewBox="0 0 220 130" role="img" aria-label="月別推移の折れ線グラフ。1月 30、2月 58、3月 45、4月 90、5月 72、6月 110、7月 95">
<!-- グリッド線 -->
<line x1="0" y1="26" x2="220" y2="26" class="lc-grid"/>
<line x1="0" y1="56" x2="220" y2="56" class="lc-grid"/>
<line x1="0" y1="86" x2="220" y2="86" class="lc-grid"/>
<line x1="0" y1="116" x2="220" y2="116" class="lc-grid"/>
<!-- 折れ線 -->
<polyline class="lc-line" points="10,100 46,72 82,85 118,40 154,58 190,20 210,35"/>
<!-- 頂点の点 -->
<circle class="lc-dot" cx="10" cy="100" r="4"/>
<circle class="lc-dot" cx="46" cy="72" r="4"/>
<circle class="lc-dot" cx="82" cy="85" r="4"/>
<circle class="lc-dot" cx="118" cy="40" r="4"/>
<circle class="lc-dot" cx="154" cy="58" r="4"/>
<circle class="lc-dot" cx="190" cy="20" r="4"/>
<circle class="lc-dot" cx="210" cy="35" r="4"/>
</svg>
<div class="lc-labels" aria-hidden="true">
<span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span><span>7月</span>
</div>
<div class="lc-footer">
<button class="lc-btn" type="button" aria-label="アニメーションを再生">再生</button>
</div>
</div>