syncfusion-aspnetcore-bullet-chart

Syncfusion ASP.NET Core Bullet Chart

Bullet Chart は、目標のベンチマークに対する実績を、コンパクトで視認性に優れた形式で表示する棒グラフの一種です。複数のデータ要素（値バー、目標マーカー、範囲）を組み合わせることで、パフォーマンスをすぐに把握できます。

このスキルを使用する場面

次のような場合に Bullet Chart スキルを使用してください。

• 目標に対するパフォーマンスの比較 - 実績値と目標値を1つのビジュアライゼーションに並べて表示します
• KPI ダッシュボードの作成 - 主要業績評価指標をひと目で素早く評価します
• ベンチマークによる進捗の表示 - 比較用の範囲（低い、標準、良好）を使用して目標達成に向けた進捗を追跡します
• 複数の指標の監視 - ダッシュボードに複数の Bullet Chart を表示し、比較分析を行います
• コンパクトなビジュアライゼーションの作成 - 従来の棒グラフより少ないスペースで、より多くのデータを表示します
• パフォーマンスレポートの作成 - エグゼクティブダッシュボード、売上追跡、生産性指標、収益予測に使用します

よくあるシナリオ：

• 売上とノルマの追跡
• 従業員のパフォーマンスと目標の比較
• プロジェクトのマイルストーンと期限の比較
• 収益と予測の比較
• 顧客満足度スコアと目標の比較

---

ナビゲーションとドキュメントガイド

はじめに

📄 参照： references/getting-started.md

• インストールと ASP.NET Core プロジェクトのセットアップ
• NuGet パッケージのインストール
• TagHelper とスクリプトリソースの追加
• データを使用した最初の Bullet Chart の作成
• チャートへのタイトルの追加

データバインディングと構成

📄 参照： references/data-binding.md

• DataSource プロパティの構成
• 値フィールドと目標フィールドのマッピング
• データモデルの操作
• 動的および静的なデータバインディング
• データ構造のベストプラクティス

軸のカスタマイズ

📄 参照： references/axis-customization.md

• 目盛線とラベルのカスタマイズ
• ラベルと数値の書式設定
• 目盛りとラベルの配置オプション
• カテゴリラベルの構成
• 高度な軸の配置

範囲と比較バー

📄 参照： references/ranges-and-bars.md

• パフォーマンス範囲（低い、標準、良好）の構成
• 目標バーの種類（Rect、Cross、circle）
• 値バーのカスタマイズ
• 効果的な比較用ビジュアライゼーションの作成
• 範囲の配色とスタイル設定

カスタマイズとレイアウト

📄 参照： references/customization.md

• 向き（水平または垂直の描画）
• 右から左（RTL）への表示のサポート
• アニメーション設定とトランジション
• チャートのサイズとレスポンシブな寸法
• テーマと色のカスタマイズ

データラベル、ツールチップ、アクセシビリティ

📄 参照： references/data-and-accessibility.md

• データラベルの表示
• ホバーツールチップの構成
• アクセシビリティのための WAI-ARIA 属性
• キーボードナビゲーションのサポート
• アクセシブルなダッシュボードの作成

---

クイックスタートの例

値と目標を含む基本的な Bullet Chart：

// CSHTML.cs - Controller/Page code
public class QuickStartBulletData
{
    public double Value { get; set; }
    public double Target { get; set; }
    public string Category { get; set; }
}

public IActionResult Index()
{
    ViewBag.ChartData = new List<QuickStartBulletData>
    {
        new QuickStartBulletData { Value = 75, Target = 80, Category = "Q1" },
        new QuickStartBulletData { Value = 85, Target = 90, Category = "Q2" },
        new QuickStartBulletData { Value = 65, Target = 75, Category = "Q3" }
    };
    return View();
}

<ejs-bulletchart id="container" 
    dataSource="@ViewBag.ChartData" 
    valueField="Value" 
    targetField="Target"
    categoryField="Category"
    minimum="0"
    maximum="100"
    interval="20"
    title="Sales Performance">
    <e-bullet-range-collection>
        <e-bullet-range end="50" color="lightgray"></e-bullet-range>
        <e-bullet-range end="75" color="lightblue"></e-bullet-range>
        <e-bullet-range end="100" color="lightgreen"></e-bullet-range>
    </e-bullet-range-collection>
</ejs-bulletchart>

---

よくあるパターン

パターン 1：複数の Bullet Chart を含むダッシュボード

エグゼクティブ向けのモニタリング用に、複数の指標を横並びで表示します。

// Each metric has its own data and configuration
var salesData = new List<BulletChartData> { /* sales vs quota */ };
var revenueData = new List<BulletChartData> { /* revenue vs forecast */ };
var customerSatisfaction = new List<BulletChartData> { /* score vs target */ };

パターン 2：複数の値にカテゴリを使用する

1つのチャートに複数のカテゴリを表示します。

<ejs-bulletchart id="container" 
    dataSource="@ViewBag.MultipleCategoryData"
    categoryField="Category"
    valueField="Value"
    targetField="Target">
</ejs-bulletchart>

パターン 3：範囲に基づく色分け

範囲を定義し、パフォーマンスレベルを自動で色分けします。

<e-bullet-range-collection>
    <e-bullet-range end="25" color="#ff6b6b"></e-bullet-range>  
    <e-bullet-range end="50" color="#ffd43b"></e-bullet-range>  
    <e-bullet-range end="75" color="#69db7c"></e-bullet-range>  
    <e-bullet-range end="100" color="#51cf66"></e-bullet-range> 
</e-bullet-range-collection>

---

主要な設定プロパティ

Prop	Type	Default	Purpose
dataSource	object	null	表示するデータコレクション
valueField	string	""	実績値／特徴値に対応するフィールド名
targetField	string	""	目標値／比較値に対応するフィールド名
categoryField	string	null	複数行のチャートでカテゴリラベルに使用するフィールド
title	string	""	チャートのタイトルテキスト
subtitle	string	""	チャートのサブタイトルテキスト
titlePosition	TextPosition	Top	タイトルの位置：Top、Bottom、Left、Right
titleStyle	BulletChartBulletLabelStyle	null	チャートタイトルのフォント／スタイル
subtitleStyle	BulletChartBulletLabelStyle	null	チャートサブタイトルのフォント／スタイル
orientation	OrientationType	Horizontal	レイアウト方向：Horizontal または Vertical
minimum	double	NaN	スケール軸の最小値
maximum	double	NaN	スケール軸の最大値
interval	double	NaN	軸の目盛り間隔
ranges	List<Range>	null	背景色に使用する定性的な範囲の定義
animation	BulletChartAnimation	null	アニメーション設定（enable、duration、delay）
tooltip	BulletChartBulletTooltipSettings	null	ホバー時のツールチップ設定
dataLabel	BulletChartBulletDataLabel	null	特徴バーに表示する値ラベル
labelStyle	BulletChartBulletLabelStyle	null	軸ラベルのフォント／スタイル
categoryLabelStyle	BulletChartBulletLabelStyle	null	カテゴリラベルのフォント／スタイル
labelFormat	string	""	軸ラベルの数値形式（例："n2"、"c2"、"p1"）
labelPosition	LabelsPlacement	Outside	軸ラベルの配置：Inside または Outside
tickPosition	TickPosition	Outside	目盛りの配置：Inside または Outside
majorTickLines	BulletChartMajorTickLines	null	主目盛り線の幅、高さ、色
minorTickLines	BulletChartMinorTickLines	null	補助目盛り線の幅、高さ、色
minorTicksPerInterval	double	4	各主目盛り間の補助目盛りの数
opposedPosition	boolean	false	軸を反対側に描画
enableGroupSeparator	boolean	false	軸ラベルに桁区切りを表示
enableRtl	boolean	false	右から左への描画をサポート
enablePersistence	boolean	false	ページの再読み込み後もコンポーネントの状態を保持
theme	ChartTheme	Material	ビジュアルテーマ（例：Material、Bootstrap5、Fluent2）
width	string	null	チャートの幅（ピクセルまたはパーセンテージ、例："500px"、"100%"）
height	string	null	チャートの高さ（ピクセルまたはパーセンテージ）
margin	BulletChartMargin	null	左、右、上、下の余白
border	BulletChartContainerBorder	null	チャートの境界線の色と幅
valueFill	string	null	特徴／実績バーの塗りつぶし色
valueHeight	double	6	特徴バーの高さ／太さ
valueBorder	BulletChartValueBorder	null	特徴バーの境界線の色と幅
type	FeatureType	Rect	特徴バーの形状：Rect または Dot
targetColor	string	"#191919"	比較／目標マーカーの色
targetWidth	double	5	目標マーカーの幅／太さ
targetTypes	object	null	目標マーカーの形状：Rect、Circle、Cross
legendSettings	BulletChartBulletChartLegendSettings	null	凡例の表示と配置
query	string	null	データソースをフィルタリングするクエリ文字列
locale	string	null	数値形式に使用するロケール
tabIndex	double	1	キーボードアクセシビリティ用のタブインデックス
htmlAttributes	object	—	追加の HTML 属性（title、name など）

イベント

イベント	目的
load	バレットチャートの読み込み前に発生します
loaded	バレットチャートの描画後に発生します
tooltipRender	ツールチップの描画前に発生します
legendRender	凡例の描画前に発生します
beforePrint	チャートの印刷前に発生します
bulletChartMouseClick	チャートがクリックされたときに発生します

---

一般的なユースケース

営業ダッシュボード：

• 営業担当者ごとの実績とノルマを比較します
• 四半期ごとの売上と予測を表示します
• 案件パイプラインと目標を確認します

人事・パフォーマンス：

• 従業員の KPI と目標を比較します
• チームの生産性指標を確認します
• プロジェクトのマイルストーンの進捗を確認します

運用：

• システムの稼働率と SLA 目標を比較します
• 応答時間と許容レベルを比較します
• コストと予算を比較します

小売：

• 店舗の売上と目標を比較します
• 在庫回転率と目標を比較します
• 顧客満足度とベンチマークを比較します