データ可視化・ダッシュボード
折れ線グラフ描画
SVG polyline が stroke-dashoffset で描かれ、続いて各頂点の点が順番にポップインして現れる。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="lc-wrap">
<svg class="lc-svg" viewBox="0 0 220 130" aria-label="折れ線グラフ">
<!-- グリッド線 -->
<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">
<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>