syncfusion-blazor-bullet-chart

ブレットチャートの実装

NuGet: Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes（または個別パッケージの Syncfusion.Blazor.BulletChart） Namespace: Syncfusion.Blazor.Charts

KPI やパフォーマンスの可視化に使用する Syncfusion Blazor ブレットチャートコンポーネントを実装するための包括的なスキルです。ブレットチャートは、実績値、目標マーカー、定性的な範囲を限られたスペースにコンパクトに表示することに特化した棒グラフの一種です。

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

以下が必要な場合は、このスキルをすぐに使用してください。

• KPI（重要業績評価指標）ダッシュボードを表示する
• 実績と目標値を比較する
• 定性的な範囲（良好、平均、不良）を含む指標を可視化する
• ダッシュボード用のコンパクトなパフォーマンス指標を作成する
• 販売目標、収益目標、またはノルマの達成状況を追跡する
• 特徴量と比較指標を表示する
• 複数の KPI 指標を含む経営幹部向けダッシュボードを構築する
• コンテキストゾーンを使って目標への進捗状況を表示する
• 現在のパフォーマンスをベンチマークと比較する
• ダッシュボードの限られたスペースでパフォーマンス指標を可視化する
• ビジネスインテリジェンス向けの高密度な可視化を作成する
• 複数のパフォーマンス指標を縦または横のレイアウトで表示する
• Blazor Server、WebAssembly、または Web App 向けに、レスポンシブな KPI カードやウィジェットを構築する

コンポーネントの概要

Syncfusion Blazor ブレットチャート（SfBulletChart）は、KPI の可視化に最適化された専用のチャートコンポーネントです。次の要素を表示します。

• 実績バー（特徴量）：主要なデータ値を横棒または縦棒として表示します
• 目標バー（比較指標）：垂直な線または図形として目標マーカーを表示します
• 定性的な範囲：パフォーマンスレベル（不良、満足、良好）を表す背景ゾーンです
• コンパクトなデザイン：ダッシュボードに最適な省スペースのレイアウトです
• 複数のレイアウト：カテゴリごとにグループ化した単一または複数のブレットチャートを表示できます
• カスタマイズ：豊富なスタイル、テーマ、書式設定オプションを利用できます

主な特長：

• バーの種類：実績値には Rect（既定）または Dot を使用します
• 目標の形状：Rect、Circle、または Cross のマーカーを使用します
• 方向：横（既定）または縦のレイアウトを使用します
• データバインディング：単一ポイント、複数系列、またはカテゴリベースのデータに対応します
• インタラクティブ機能：ツールチップ、データラベル、凡例、イベントを利用できます
• アクセシビリティ：キーボード操作に対応し、WCAG に準拠しています

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

API リファレンス

SfBulletChart<TValue> の主要な API を簡潔にまとめています。完全なリファレンスと使用例については、references/api-reference.md を参照してください。

SfBulletChart — 主要なパラメーター

• DataSource: object — データコレクション（List、IEnumerable、またはリモートの DataManager）。
• ValueField: string — 実績（フィーチャー）値のプロパティ名。
• TargetField: string — 目標値／比較値のプロパティ名。
• CategoryField: string — カテゴリーをグループ化するプロパティ名（複数の箇条書きを表示する場合）。
• Minimum / Maximum / Interval: double — 軸のスケール設定。
• Orientation: OrientationType — Horizontal または Vertical。
• Type: FeatureType — 実績バーの描画方法（Rect または Dot）。
• TargetTypes: List<TargetType> — 目標値のマーカー形状（例：Rect、Circle、Cross）。
• Width / Height / Title / Theme: レイアウトと外観を制御する視覚設定。

主要な子コンポーネント

• BulletChartRange: 定性的な背景範囲（End、Color、Opacity）を定義します。
• BulletChartRangeCollection: 複数の BulletChartRange エントリーを格納するコンテナーです。
• BulletChartDataLabel: データラベルのオプション（Enable、Template、TextStyle）です。
• BulletChartTooltip: ツールチップの設定（Enable、Template、BulletChartTooltipTextStyle）です。

外観とレイアウト

• Border / Margin / MajorTickLines / MinorTickLines / CategoryLabelStyle: 軸、目盛り、間隔を制御します。
• LegendSettings / LegendLocation / LegendTextStyle: カテゴリーや複数の箇条書きを使用する場合の凡例の外観を設定します。

イベント

• Loaded / Resized: 初期化やサイズ変更を検知するライフサイクルイベントです。
• TooltipRender / LabelRender / LegendRender / PointClick: 実行時の操作をカスタマイズするフックです。

重要な列挙型

• OrientationType: Horizontal | Vertical。
• TargetType: Rect | Circle | Cross。
• FeatureType: Rect | Dot。

API の詳細、メソッドシグネチャー、イベント引数クラス、簡単な使用例については、references/api-reference.md を参照してください。

はじめに

📄 読む: references/getting-started.md

インストール、セットアップ、最初のブレットチャートについては、こちらから始めてください。以下の内容を扱っています。

• Syncfusion.Blazor.BulletChart NuGet パッケージのインストール
• Blazor Server、WebAssembly、Web App のセットアップ
• サービスの登録とテーマの設定
• サンプルデータを使用した基本的な SfBulletChart の実装
• プロジェクト構成とスクリプトの参照
• よくあるセットアップ問題のトラブルシューティング

チャートの主要要素

実績バーと目標バー

📄 読む: references/actual-target-bars.md

チャートの主な 2 つの要素について説明します。

• 実績バー（フィーチャー測定値）：ValueField のマッピング、Rect と Dot の種類、スタイル設定
• 目標バー（比較測定値）：TargetField のマッピング、Circle／Cross／Rect の形状、複数の目標値
• 両方のバーの色のカスタマイズ
• 幅と高さの設定
• 視覚的な階層構造を作るためのベストプラクティス

定性的な範囲

📄 読む: references/ranges.md

パフォーマンスゾーンを定義する背景範囲を設定します。

• End プロパティを使用した範囲の境界
• 色と不透明度のカスタマイズ
• 良好／標準／不良のゾーンパターン
• 複数の範囲の設定
• ビジュアルデザインのベストプラクティス

データの設定

データバインディング

📄 読む: references/data-binding.md

ブレットチャートのデータソースを設定します。

• シンプルな KPI 用の単一データポイント
• カテゴリーを含む複数のデータポイント（垂直レイアウト）
• CategoryField、ValueField、TargetField のマッピング
• ローカルデータソース（List、Array、ExpandoObject）
• SfDataManager を使用したリモートデータバインディング
• 動的なデータ更新とリフレッシュのパターン

カスタマイズとスタイル設定

軸のカスタマイズ

📄 参照: references/axis-customization.md

数値スケールをカスタマイズします：

• 最小値、最大値、間隔のプロパティ
• 水平方向と垂直方向の配置
• 主目盛りと補助目盛りの設定
• 軸ラベルの書式設定と回転
• ラベルの反対側への配置
• RTL（右から左）への対応

視覚的なカスタマイズ

📄 参照: references/visual-customization.md

外観、テーマ、レイアウトを制御します：

• グラフの寸法（幅、高さ、コンテナー）
• テーマの選択（Material、Bootstrap、Fluent、Tailwind、Fabric、Highcontrast）
• カラーパレットのカスタマイズ
• タイトルとサブタイトルの設定
• 境界線、マージン、パディングの設定
• レスポンシブデザインのパターン

その他の機能

データラベル、ツールチップ、凡例

📄 参照: references/data-labels-tooltips-legend.md

データの視認性と操作性を高めます：

• データラベル：有効化、書式設定、配置、テンプレートのオプション
• ツールチップ：既定およびカスタムのテンプレート、書式文字列
• 凡例：位置、配置、カスタムテキスト、表示の切り替え

イベントとアクセシビリティ

📄 参照: references/events-accessibility.md

ユーザー操作を処理し、アクセシビリティを確保します：

• イベント：OnLoad、OnChartMouseClick、OnTooltipRender、OnLegendRender
• アクセシビリティ：WCAG 準拠、キーボード操作、スクリーンリーダー、ハイコントラストテーマ
• ARIA 属性とテスト用チェックリスト

クイックスタートの例

収益の実績を示す、最小構成のバレットチャートを紹介します：

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@RevenueData" 
               ValueField="ActualRevenue" 
               TargetField="TargetRevenue" 
               Minimum="0" 
               Maximum="300" 
               Interval="50" 
               Title="Revenue (in thousands)">
    <BulletChartRangeCollection>
        <BulletChartRange End="150" Color="#d32f2f"></BulletChartRange>
        <BulletChartRange End="250" Color="#ffa726"></BulletChartRange>
        <BulletChartRange End="300" Color="#66bb6a"></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code {
    public class RevenueMetric
    {
        public double ActualRevenue { get; set; }
        public double TargetRevenue { get; set; }
    }
    
    public List<RevenueMetric> RevenueData = new List<RevenueMetric>
    {
        new RevenueMetric { ActualRevenue = 270, TargetRevenue = 250 }
    };
}

この例で作成されるもの：

• 収益 270K ドルを示す実績バー
• 目標 250K ドルを示すターゲットマーカー
• 3 つの定性的な範囲：低い（0～150）、満足（150～250）、良好（250～300）
• タイトル付きの横方向レイアウト

よくあるユースケース

1. 複数の指標を表示する KPI ダッシュボード

複数のパフォーマンス指標を垂直方向のレイアウトで表示します：

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@PerformanceData" 
               CategoryField="Metric" 
               ValueField="Actual" 
               TargetField="Target" 
               Orientation="OrientationType.Vertical"
               Height="400"
               Minimum="0" 
               Maximum="100">
    <BulletChartRangeCollection>
        <BulletChartRange End="35" Color="#d32f2f"></BulletChartRange>
        <BulletChartRange End="70" Color="#ffa726"></BulletChartRange>
        <BulletChartRange End="100" Color="#66bb6a"></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code {
    public class KPIMetric
    {
        public string Metric { get; set; }
        public double Actual { get; set; }
        public double Target { get; set; }
    }
    
    public List<KPIMetric> PerformanceData = new List<KPIMetric>
    {
        new KPIMetric { Metric = "Revenue", Actual = 85, Target = 80 },
        new KPIMetric { Metric = "Profit", Actual = 65, Target = 75 },
        new KPIMetric { Metric = "Market Share", Actual = 45, Target = 60 },
        new KPIMetric { Metric = "Customer Satisfaction", Actual = 90, Target = 85 }
    };
}

2. カスタムスタイルの売上目標トラッカー

カスタムカラーとターゲットマーカーを使って売上実績を追跡します：

@using Syncfusion.Blazor.Charts
<SfBulletChart DataSource="@SalesData" 
               ValueField="Sales" 
               TargetField="Quota" 
               TargetTypes="new List<Syncfusion.Blazor.Charts.TargetType> { Syncfusion.Blazor.Charts.TargetType.Circle }"
               Type="FeatureType.Rect"
               Minimum="0" 
               Maximum="500" 
               Interval="100"
               Title="Q1 Sales Performance">
    <BulletChartRangeCollection>
        <BulletChartRange End="200" Color="#ff5252" Opacity="0.5"></BulletChartRange>
        <BulletChartRange End="350" Color="#ffeb3b" Opacity="0.5"></BulletChartRange>
        <BulletChartRange End="500" Color="#4caf50" Opacity="0.5"></BulletChartRange>
    </BulletChartRangeCollection>
    <BulletChartTooltip TValue="SalesMetric" Enable="true">
        <BulletChartTooltipTextStyle Color="white" FontWeight="600"></BulletChartTooltipTextStyle>
    </BulletChartTooltip>
</SfBulletChart>

@code {
    public class SalesMetric
    {
        public double Sales { get; set; }
        public double Quota { get; set; }
    }
    
    public List<SalesMetric> SalesData = new List<SalesMetric>
    {
        new SalesMetric { Sales = 380, Quota = 350 }
    };
}

3. データラベル付きのエグゼクティブダッシュボードカード

エグゼクティブダッシュボード向けのコンパクトな KPI カードです：

@using Syncfusion.Blazor.Charts

<div style="width: 300px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px;">
    <SfBulletChart DataSource="@MetricData" 
                   ValueField="Value" 
                   TargetField="Goal" 
                   Minimum="0" 
                   Maximum="100" 
                   Interval="25"
                   Width="100%"
                   Height="60"
                   Title="Customer Retention Rate">
        <BulletChartRangeCollection>
            <BulletChartRange End="60" Color="#f44336"></BulletChartRange>
            <BulletChartRange End="80" Color="#ff9800"></BulletChartRange>
            <BulletChartRange End="100" Color="#4caf50"></BulletChartRange>
        </BulletChartRangeCollection>
        <BulletChartDataLabel>
            <BulletChartDataLabelStyle Color="#FFFFFF" Opacity="1" Size="15px" FontStyle="italic"></BulletChartDataLabelStyle>
        </BulletChartDataLabel>
    </SfBulletChart>
</div>

@code {
    public class Metric
    {
        public double Value { get; set; }
        public double Goal { get; set; }
    }
    
    public List<Metric> MetricData = new List<Metric>
    {
        new Metric { Value = 92, Goal = 85 }
    };
}

主要プロパティのリファレンス

基本プロパティ

プロパティ	型	説明	デフォルト
DataSource	object	グラフのデータコレクション	null
ValueField	string	実績値のプロパティ名	null
TargetField	string	目標値のプロパティ名	null
CategoryField	string	カテゴリー分類に使うプロパティ	null
Minimum	double	スケールの最小値	0
Maximum	double	スケールの最大値	100
Interval	double	スケールの間隔	10

視覚的なプロパティ

プロパティ	型	説明	デフォルト
Type	FeatureType	実績バーの種類（Rect、Dot）	Rect
TargetTypes	List	ターゲットマーカーの形状	Rect
Orientation	OrientationType	レイアウトの方向	Horizontal
Width	string	グラフの幅	"100%"
Height	string	グラフの高さ	"126px"
Title	string	グラフのタイトル	""
Theme	ChartTheme	視覚テーマ	Material

データ表示

プロパティ	型	説明
BulletChartRangeCollection	Component	定性的な範囲
BulletChartDataLabel	Component	データラベルの設定
BulletChartTooltip	Component	ツールチップの設定
BulletChartLegend	Component	凡例の設定

実装ワークフロー

バレットチャートを実装する際は、次の手順に従ってください。

1. インストールと基本設定については、まずGetting Startedを確認します
2. データ構造に合わせて、Data Bindingを参照し、データバインディングを設定します
3. Rangesを使用してパフォーマンスゾーンを定義し、範囲を設定します
4. Actual and Target Barsを参照し、実績バーと目標バーを追加します
5. 適切なスケーリングのため、Axis Customizationで軸をカスタマイズします
6. Visual Customizationを参照し、視覚的なスタイルを適用します
7. Data Labels, Tooltips, and Legendを参照し、データラベルやツールチップを追加します
8. Events and Accessibilityを使用し、インタラクティブ機能とアクセシビリティを追加します

質問や問題がある場合は、各リファレンスファイルのトラブルシューティングセクションを参照するか、コンプライアンス要件についてEvents and Accessibilityを確認してください。