データ可視化・ダッシュボード
ゲージメーター
スピードメーター風の半円ゲージ。針が0から目標値までアニメで動き、中央に数値がカウントアップで表示される。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="gm-wrap">
<svg class="gm-svg" viewBox="-20 -14 240 148" aria-label="ゲージメーター 76pt">
<!-- 目盛りラベル(viewBoxに余白を持たせ、両端と頂点が見切れないように配置) -->
<text class="gm-tick-lbl" x="4" y="128" text-anchor="middle">0</text>
<text class="gm-tick-lbl" x="100" y="4" text-anchor="middle">50</text>
<text class="gm-tick-lbl" x="196" y="128" text-anchor="middle">100</text>
<!-- トラック(背面弧) -->
<path class="gm-track" d="M 20 105 A 80 80 0 0 1 180 105"/>
<!-- 塗り弧 -->
<path class="gm-fill" d="M 20 105 A 80 80 0 0 1 180 105"/>
<!-- 針 -->
<line class="gm-needle" x1="100" y1="105" x2="100" y2="35"/>
<!-- 中心円 -->
<circle cx="100" cy="105" r="6" fill="#2b50c7"/>
<circle cx="100" cy="105" r="3" fill="#fbf6ec"/>
</svg>
<div class="gm-center">
<span class="gm-val">0</span><span class="gm-unit">pt</span>
</div>
<div class="gm-footer">
<button class="gm-btn" type="button" aria-label="アニメーションを再生">再生</button>
</div>
</div>