§01-14Data Visualization

ゲージ / ダイヤル

一つの指標を針や円弧の塗りで示す。

現在値が目標や上限に対してどこにあるかを一目で伝える。監視画面で指標を一つだけ強調したいときに向く。

実装のポイント

半円の円周長を strokeDasharray で塗り分け、針は値を 180° 範囲の角度に変換して回す。SVG 属性は CSS transition が効かないので針は transform: rotate で動かす。