syncfusion-angular-bullet-chart

Syncfusion Angular Bullet Chart の実装

このスキルを使用するタイミング

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

• Angular アプリケーションで Bullet Chart コンポーネントを作成する
• 実績値と目標値を比較したパフォーマンスデータを表示する
• 品質範囲（良好、標準、不良）を定義してカスタマイズする
• 軸、ラベル、データ視覚化要素をカスタマイズする
• アクセシビリティ機能とキーボード操作を追加する
• ツールチップ、データラベル、アニメーションを設定する
• チャートの向きを変更する、またはテーマを適用する

コンポーネントの概要

Syncfusion Angular Bullet Chart は、実績値と目標値を比較するために設計された、専用のデータ視覚化コンポーネントです。パフォーマンス指標、進捗状況、目標達成状況の視覚化に最適です。このコンポーネントには、次の要素が表示されます。

• 値バー（実績バー）：主要なデータ測定値（フィーチャー測定値）
• 目標バー（比較バー）：目標値または基準値
• 範囲：品質レベル（良好、標準、不良）を表す色分けされた領域
• 軸：データ値のスケールを設定できます
• ラベルとツールチップ：追加のコンテキストや、ホバー時に表示される情報

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

はじめに

📄 参照先： references/getting-started.md

• インストールとパッケージのセットアップ（@syncfusion/ej2-angular-charts）
• Bullet Chart の基本的な初期化
• Angular 21 以降向けの Angular CLI セットアップ
• スタンドアロンコンポーネントのアーキテクチャ
• 機能（ツールチップなど）のモジュール注入
• データソースと基本設定の追加

データバインディングとデータソース

📄 参照先： references/data-binding.md

• 静的データセットのローカルデータバインディング
• 動的データのリモートデータバインディング
• データソースの構造とフィールドのマッピング
• valueField と targetField のマッピング
• 動的なデータ更新

軸と範囲の設定

📄 参照先： references/axes-and-ranges.md

• 主目盛りと補助目盛りのカスタマイズ
• 目盛りの配置（内側／外側）
• ラベルの書式設定（数値、パーセンテージ、通貨）
• 軸ラベルの位置とカスタマイズ
• カテゴリラベルとカスタムラベルのスタイル
• 軸を右寄せにする対向位置
• 範囲の定義と色のカスタマイズ
• 品質範囲の視覚化（良好、標準、不良）

視覚要素とデータ表示

📄 参照先： references/visual-elements.md

• 値バーのスタイル設定と形状のカスタマイズ（Rect、Dot）
• 実績バーの境界線と塗りつぶしのカスタマイズ
• 目標バーの種類（Circle、Cross、Rect）
• 目標バーの色と幅のカスタマイズ
• データラベルの設定とスタイル
• ツールチップの設定とカスタマイズ
• カスタム HTML を使用したツールチップテンプレート
• タイトルとサブタイトルの位置
• チャートのサイズ（ピクセル、パーセンテージ）

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

📄 参照先： references/customization.md

• 横向きと縦向き
• 右から左への表示（RTL）サポート
• アニメーションの設定（継続時間、遅延）
• テーマの選択と適用
• CSS によるカスタマイズ方法
• レスポンシブデザインのパターン

アクセシビリティ機能

📄 参照先： references/accessibility.md

• WCAG 2.2、Section 508、ADA への準拠
• キーボード操作（Tab、Shift+Tab、Ctrl+P）
• スクリーンリーダーのサポートと WAI-ARIA 属性
• 色のコントラスト基準
• モバイルデバイスのサポート

クイックスタートの例

最小限の動作例を紹介します。

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'
        [tooltip]='{ enable: true }'
        title='Sales Performance'
        [ranges]='ranges'>
    </ejs-bulletchart>`,
    providers: [BulletTooltipService]
})
export class AppComponent implements OnInit {
    public data: any;
    public ranges: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 }
        ];
        
        this.ranges = [
            { end: 50, color: '#ffe0b2', opacity: 0.6 },    // Poor
            { end: 100, color: '#fff9c4', opacity: 0.6 },   // Satisfactory
            { end: 150, color: '#c8e6c9', opacity: 0.6 }    // Good
        ];
    }
}

よくあるパターン

パターン 1：営業パフォーマンスダッシュボード

目標値に対する営業指標を表示する場合：

data = [
    { category: 'Q1', value: 25000, target: 30000 },
    { category: 'Q2', value: 28000, target: 30000 },
    { category: 'Q3', value: 35000, target: 30000 }
];

ranges = [
    { end: 20000, color: '#ffe0b2' },      // Below Target
    { end: 30000, color: '#fff9c4' },      // On Target
    { end: 40000, color: '#c8e6c9' }       // Above Target
];

パターン 2：従業員のパフォーマンス評価

個人のパフォーマンススコアを比較する場合：

data = [
    { name: 'Alice', value: 85, target: 80 },
    { name: 'Bob', value: 72, target: 80 },
    { name: 'Charlie', value: 90, target: 80 }
];

パターン 3：向きを指定した KPI の追跡

スペースが限られている場合や、縦向きでの表示が適している場合：

<ejs-bulletchart orientation='Vertical' ...></ejs-bulletchart>

主なプロパティ

プロパティ	型	目的
dataSource	Array	値フィールドと目標フィールドを含むデータオブジェクトの配列
valueField	String	実績値／特徴量のプロパティ名
targetField	String	目標値／比較値のプロパティ名
ranges	Array	品質ゾーンを定義する範囲オブジェクトの配列
title	String	チャートの上部に表示されるタイトル
subtitle	String	補足情報を示すサブタイトル
orientation	String	「Horizontal」（デフォルト）または「Vertical」
tooltip	Object	ホバーツールチップの設定
dataLabel	Object	値ラベルの設定
type	String	値バーの形状：「Rect」（デフォルト）または「Dot」
targetTypes	String	目標バーの形状：「Rect」、「Circle」、または「Cross」
width	String/Number	ピクセルまたはパーセンテージで指定するチャートの幅
height	String/Number	ピクセルまたはパーセンテージで指定するチャートの高さ
theme	String	テーマ名（Material、Fabric、Bootstrap、Tailwind など）
enableRtl	Boolean	右から左への表示を有効にする
animation	Object	表示時のアニメーションの設定

一般的なユースケース

API リファレンス

Syncfusion Angular BulletChart の完全な API リファレンスは、references フォルダーにあります。公式 API ドキュメントに準拠したコンポーネントのプロパティ、メソッド、イベント、使用上の注意を記載しています。

API リファレンスの全文はこちらをご覧ください：references/api-reference.md

1. 営業実績の追跡：品質ゾーンとともに実際の売上と目標を表示します
2. 品質指標：ベンチマークに対する生産品質を監視します
3. 人事指標：目標に対する従業員のパフォーマンスを追跡します
4. 予算分析：実際の支出と予算額を比較します
5. 学習の進捗：学習目標に向けた学生の進捗を示します
6. 健康指標：推奨値に対する健康指標を表示します
7. プロジェクトの状況：計画目標に対するプロジェクト指標を追跡します

---

**次のステップ：**上記のガイダンスを参考に、現在のニーズに合ったリファレンスファイルを選択してください。Bullet Chart を初めて使用する場合は、getting-started.mdから始めてください。