Radial Gauge (ラジアルゲージ)

Radial Gauge コンポーネントを円形のデータ可視化を使用し、カラーコードされた下部の範囲で描かれたコンテキスト内の値を表示します。Radial Gauge は、Ignite UI for Angular Radial Gauge コンポーネントと視覚的に同じものです。

ターゲット値が情報の理解や解釈に非常に重要である場合、代わりに Bullet Graph を使用します。

Radial Gauge のデモ

針のタイプ

Radial Gauge は、現在の値を示す針の形 (Needle、Trapezoid、Triangle) を制御するさまざまなオーバライドをサポートします。Figma では、Needle Shape インスタンスを選択し、右側のサイドバーからタイプを選択することで、タイプを切り替えることができます。Sketch では、これを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単にタイプを切り替えることができます。

目盛のタイプ

Radial Gauge の目盛りは外側または内側に配置でき、Thick 範囲と Thin 範囲の領域に 2 つの内側の種類があります。Figma では、右側のサイドバーにあるプロパティから Ranges と Ticks を選択できます。Sketch では、これを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単にタイプを切り替えることができます。

範囲

Radial Gauge は、範囲 (Full、Half、および Quarter) を表示するダイアルを制御するさまざまなオーバーライドを提供します。Figma で、右側のサイドバーから Ranges と Ticks で同じになるように Range プロパティを選択します。Sketch では、範囲を切り替えるには Symbol Overrides を使用する必要がありますが、Adobe XD では、上記のオプション用に Radial Gauge の個別のバリアントがあります。

Series Thickness (シリーズの厚さ)

Radial Gauge には、Thick と Thin の 2 種類の Series Thickness があります。Figma では、右側のサイドバーのプロパティを使用して、2 つの Series Thickness オプションから選択します。Sketch では、シリーズの厚さを切り替えるには Symbol Overrides を使用する必要がありますが、Adobe XD では、上記のオプション用に Radial Gauge の個別のバリアントがあります

範囲のサイズ

Radial Gauge は、定義済みの 3 つの範囲 (2 つ、3 つ、4 つ) 設定があります。Figma では、プロパティパネルの Series Amount プロパティを使用してシリーズの量を変更できます。Sketch では、これを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に範囲のサイズを切り替えることができます。

スタイル設定

Radial Gauge のスタイル設定は高い柔軟性があり、背景色のオプションやブラシの選択 (Needle Brush、Range Brushes、および内側と外側のダイヤルタイプでのみ使用できる Tick Brush、Minor Tick Brush) があります。

使用方法

データ可視化や情報ダッシュボードの作成時では、スクリーンスペースの量に基づいて Linear と Radial Gauges のいずれかを選択します。Gauges は現在の値のみ表示し、過去の値を表示する方法はありません。アプリケーションでそのようなデータが必要な場合は Line または Column Chart を検討してください。わかりやすく、鮮明なデータ可視化を簡単に作成するために Needle の色は範囲や背景と十分なコントラストのある色にし、読みにくい、解釈しずらい結果となる同じ色のバリアントは使用しないようにします。Linear Gauge とは異なり、Radial Gauge コンポーネントは空スペースが十分あるため必要な情報を維持しながら Radial Gauges のコレクションを並べて配置できます。

良い例	悪い例

Radial Gauge (ラジアル ゲージ)