syncfusion-angular-heatmap

HeatMap の実装

HeatMap Chart コンポーネントは、値を色のグラデーションまたは固定色で表現する、2 次元データの表示に適した強力な可視化ツールです。行列データのパターン、相関関係、分布の分析、時系列ヒートマップなど、データを色で表現する必要があるあらゆる場面で役立ちます。

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

• データ行列の可視化： 色分けされたセルで 2D データ配列を表示する
• 相関分析： 複数の変数間の関係を可視化する
• 時系列ヒートマップ： 時間の経過に伴うパターンを表示する（例：時間別／日別のアクティビティ）
• カテゴリ比較： カテゴリや指標ごとのパフォーマンスを比較する
• 強度のマッピング： 値の強度を表すグラデーションカラーでヒートマップを表示する
• インタラクティブな選択： ツールチップとイベント処理を備え、ユーザーがセルを選択できるようにする
• アクセシビリティ要件： ARIA に対応した WCAG 準拠のヒートマップを実装する
• カスタムスタイル： テーマ、パレット、カスタムレンダリング（SVG／Canvas）を適用する
• バブルヒートマップ： サイズと色でデータを表現するバブルとして可視化する
• 大規模なデータセット： SVG と Canvas のレンダリングモードを自動で切り替えて処理する

コンポーネントの概要

HeatMap は、豊富なカスタマイズ機能を備えた柔軟で高性能な可視化コンポーネントです。

• 軸の種類： 数値、カテゴリ、日時の各軸
• データバインディング： JSON 配列および 2D 行列形式
• レンダリングモード： SVG（小規模データ）と Canvas（大規模データ）を自動で切り替え
• インタラクティブ機能： セル選択、ツールチップ、データラベル、イベント
• カスタマイズ： カラーパレット、テーマ、セルのスタイル、境界線
• アクセシビリティ： WCAG 準拠、ARIA 属性、キーボードナビゲーション
• 凡例のサポート： 凡例の自動レンダリングとカスタムレンダリング
• バブル版： バブルヒートマップによる代替の可視化
• 単独での使用に対応： Angular 19 以降のスタンドアロンコンポーネントと互換性があります

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

API リファレンス

📄 参照： references/api-reference.md

はじめにとインストール

📄 参照： references/getting-started.md

• @syncfusion/ej2-angular-heatmap パッケージのインストール
• Angular のスタンドアロンモジュールと従来のモジュールにおけるモジュールのインポート
• 最初のヒートマップの作成
• 基本的なデータバインディングの設定
• インストールが機能することの確認

データバインディングと形式

📄 参照： references/data-binding.md

• 構造化データ用の JSON 配列形式
• 行列データ用の 2D 配列形式
• リモートデータ用の DataManager
• X／Y 軸フィールドのバインド
• ライブデータの更新と動的バインディング

軸の設定

📄 参照： references/axes-configuration.md

• X／Y 軸の種類：数値、カテゴリ、日時
• 軸のラベル、タイトル、間隔
• 軸の反転と反対側への配置
• 軸のカスタマイズとプロパティ
• 日付／時刻データの操作

凡例のレンダリング

📄 参照： references/legend-rendering.md

• 凡例の配置と位置合わせ
• 凡例のサイズと外観
• カスタム凡例データの表示
• インタラクティブな凡例の動作
• 凡例ラベルの書式設定

見た目のカスタマイズとレンダリング

📄 参照： references/visual-customization.md

• カラーパレットとテーマ
• SVG と Canvas のレンダリングモード
• セルのスタイルと境界線
• グラデーションカラーと固定色
• バブルヒートマップのバリエーション
• レスポンシブデザイン

インタラクティブ機能、イベント、アクセシビリティ

📄 参照： references/interactivity-events.md

• セル選択モードとイベント
• ツールチップのカスタマイズとテンプレート化
• データラベルと書式設定
• セルのクリックと選択のハンドラー
• WCAG アクセシビリティへの準拠
• ARIA 属性とキーボードナビゲーション
• スクリーンリーダーのサポート

高度な機能と使い方

📄 参照: references/advanced-features.md

• EJ1 から EJ2 への移行ガイド
• 使い方：カスタムツールチップテンプレート
• 使い方：凡例のカスタマイズ
• 使い方：大規模データセットのパフォーマンス最適化
• 選択とデータ更新の組み合わせ
• 多次元データの表現

クイックスタート

最小限のヒートマップ設定

import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMapModule } from '@syncfusion/ej2-angular-heatmap';

@Component({
    imports: [HeatMapModule],
    standalone: true,
    selector: 'app-heatmap',
    template: `
        <ejs-heatmap id='heatmap-container' 
            [dataSource]='dataSource'
            [xAxis]='xAxis'
            [yAxis]='yAxis'>
        </ejs-heatmap>
    `,
    encapsulation: ViewEncapsulation.None
})
export class HeatMapComponent {
    dataSource: any[] = [
        { ProductName: 'Milk', Year: 2005, Sales: 21, Quarter: 'Q1' },
        { ProductName: 'Milk', Year: 2006, Sales: 22, Quarter: 'Q1' },
        { ProductName: 'Milk', Year: 2007, Sales: 23, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2005, Sales: 18, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2006, Sales: 19, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2007, Sales: 20, Quarter: 'Q1' }
    ];

    xAxis: any = {
        labels: ['2005', '2006', '2007'],
        type: 'Labels',
        opposedPosition: true
    };

    yAxis: any = {
        labels: ['Milk', 'Bread'],
        type: 'Labels'
    };
}

よく使われるパターン

パターン 1：売上実績マトリックス

年ごとの製品売上を表示し、色のグラデーションで実績レベルを表します。

dataSource = [
    { Product: 'Product A', Year: 2020, Sales: 50 },
    { Product: 'Product A', Year: 2021, Sales: 75 },
    { Product: 'Product B', Year: 2020, Sales: 60 },
    { Product: 'Product B', Year: 2021, Sales: 85 }
];

xAxis = { labels: ['2020', '2021'], type: 'Labels' };
yAxis = { labels: ['Product A', 'Product B'], type: 'Labels' };

用途： 複数の軸で実績指標を比較する場合
理由： 色分けされたセルにより、パターンをすぐに把握できます

パターン 2：時系列アクティビティヒートマップ

DateTime 軸を使って、時間単位または日単位のアクティビティパターンを表示します。

<ejs-heatmap [xAxis]='{ type: "DateTime", intervalType: "Days" }'
    [yAxis]='{ labels: ["12 AM", "1 AM", "2 AM", "3 AM"] }'>
</ejs-heatmap>

用途： 時間に基づくパターン（トラフィック、使用状況、アクティビティ）を分析する場合
理由： DateTime 軸により、時系列データの書式設定とスケーリングが自動的に行われます

パターン 3：セルのインタラクティブな選択

ユーザーがセルを選択し、選択イベントに応じて処理できるようにします。

<ejs-heatmap [cellSettings]='{ border: { width: 1 } }'
    (cellSelected)='onCellSelect($event)'
    [allowSelection]='true'>
</ejs-heatmap>

onCellSelect(event: any) {
    console.log('Selected cell:', event.cellCollection);
}

用途： ドリルダウン機能を備えたインタラクティブなダッシュボードを構築する場合
理由： 選択イベントにより、動的なフィルタリングと詳細表示が可能になります

パターン 4：データラベル付きカスタムツールチップ

ホバー時やセル内に詳細情報を表示します。

<ejs-heatmap [tooltip]='{ enable: true }'>
    <e-heatmap-cellsettings [showLabel]='true' 
        [labelFormat]='{ format: "{value}" }'>
    </e-heatmap-cellsettings>
</ejs-heatmap>

用途： ユーザーがクリックせずに詳細な値を確認する必要がある場合
理由： ツールチップにより、見た目のすっきりした状態を保ちながら認知負荷を軽減できます

パターン 5：バブルヒートマップのバリエーション

セルの代わりにバブルを使用した別の可視化方法です。

<ejs-heatmap [renderingMode]='BubbleHeatMap'>
    <e-heatmap-cellsettings showLabel='true' bubbleType='Size'>
    </e-heatmap-cellsettings>
</ejs-heatmap>

用途： バブルのサイズで値の大きさを強調する場合
理由： バブルのサイズによって、視覚的な次元がさらに加わります

主要なプロパティ

データと軸

• dataSource：データオブジェクトの配列（JSON 形式）
• xAxis：X 軸の設定（Labels、Numeric、DateTime）
• yAxis：Y 軸の設定（Labels、Numeric、DateTime）
• valueBound：色のグラデーション値の範囲 [min, max]
• cellSettings：セルの外観とラベル

凡例と表示

• legendSettings：凡例の位置、配置、外観
• palette：色の配列または定義済みのテーマ
• title：ヒートマップのタイトル
• height、width：チャートの寸法

インタラクティブ機能

• allowSelection：セル選択の有効化／無効化
• cellSelected：セル選択時に発生するイベント
• cellRender：セルの外観をカスタマイズ
• cellHover：セルのホバーイベント
• tooltipSettings：ツールチップの表示設定

描画

• renderingMode：SVG または Canvas モード
• cellBorder：セルの枠線設定
• showGradientLegend：グラデーションの凡例を表示

よくあるユースケース

ユースケース 1：製品実績ダッシュボード

ヒートマップを使って、製品ごとの四半期売上指標を表示します。色の濃さで実績レベルを示します。ユーザーがセルをクリックすると、ドリルダウンの詳細を確認できます。

ユースケース 2：サーバーアクティビティモニター

曜日と時間帯ごとのサーバーの CPU／メモリ使用率を追跡します。DateTime 軸を使った時系列ヒートマップです。大規模なデータセットでは Canvas モードに自動的に切り替わります。

ユースケース 3：相関行列

複数の変数間の統計的な相関関係を可視化します。色のグラデーションで相関の強さを表します。ホバー時のツールチップに正確な値を表示します。

ユースケース 4：ウェブサイトのトラフィックヒートマップ

ページと時間ごとの訪問者のトラフィックパターンを分析します。バブルヒートマップでトラフィック量を示します。選択機能により、時間帯ごとのフィルタリングが可能になります。