Bullet Graph (ブレットグラフ)

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

目標値がない場合や未関係の場合は、Linear Gauge を代わりに使用します。

Bullet Graph のデモ

Title と Subtitle (タイトルとサブタイトル)

Bullet Graph には、テキストを変更できる Title および Subtitle があります。Figma では、レイヤーパネルで Title レイヤーと Subtitle レイヤーの表示のオンとオフを切り替えることができます。Sketch では、~No Symbol に設定して不要な場合は非表示にできますが、Adobe XD では各レイヤーを削除します。

Legend (凡例)

Bullet Graph には凡例があり、選択した Series Amount に合わせて調整できます。Figma では、レイヤーパネルで Legend インスタンスの表示のオンとオフを切り替えることができます。Sketch で凡例項目は、対応するシリーズを ~No Symbol に設定することで削除するか、Overrides/Charts/Legend/Series で見つけることで追加できます。Adobe XD では、未使用の Series レイヤーを削除する必要があります。また、アイコンの種類を Square、Line、または Circle の間で変更できます。

ツールチップ

Bullet Graph には、Figma および Adobe XD でレイヤーを削除し、Sketch でオーバーライドを ~No Symbol に設定することで非表示にできるツールチップが付属しています。

範囲のサイズ

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

Ticks と Values (目盛と値)

Ticks と Values も構成できます。2 種類の目盛り: Ticks と Minor Ticks は、色を Transparent に設定することで非表示にできます。100 までのデフォルト Values 0、10、20 などは、必要に応じて調整できます。

スタイル設定

Bullet Graph には、Value Brush、Target Value Brush、Tick Brush、Minor Tick Brush、および Range Brushes のコレクションなど、ブラシのさまざまなオプションによるスタイリングの柔軟性があります。

使用方法

データ可視化時に情報ダッシュボードは目標値かどうかに基づいて Bullet Graph と Linear Gauge のどちらかを選択します。グラフとゲージは両方とも現在の値のみ表示し、過去の値を表示する方法はありません。アプリケーションでそのようなデータが必要な場合はまたは Line または Column Chart を検討してください。わかりやすく、鮮明なデータ可視化を簡単に作成するために Value や Target Value Brushes の色は範囲や背景と十分なコントラストのある色にし、読みづらい、解釈しずらい結果となる同色のバリアントは使用しないようにします。

良い例	悪い例

Bullet Graph (ブレット グラフ)