syncfusion-react-heatmap

Syncfusion React HeatMap Chart の実装

HeatMap コンポーネントは、色のグラデーションまたは固定色を使って2次元データを視覚化するため、行列データにおけるパターン、相関、分布の分析に最適です。ヒートパターン、アクティビティマトリックス、パフォーマンスデータ、時間的な相関の表示に適しています。

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

• 2Dデータのパターンを視覚化する - 色分けしたセルで行列データを表示します
• ヒートマップを作成する - カスタムの配色を使ってインタラクティブなヒートマップを構築します
• 相関を分析する - 行と列の変数間の関係を示します
• 時系列のパターンを表示する - 時間経過に伴うアクティビティを視覚化します
• パフォーマンスを監視する - 複数の次元にわたるメトリクスを表示します
• データを探索する - 大規模なデータセットに潜むパターンを一目で把握できます
• 軸を設定する - 数値、カテゴリ、日時の軸を設定します
• 外観をカスタマイズする - カスタムカラー、凡例、スタイルを適用します
• ユーザー操作に対応する - 選択、ツールチップ、イベント処理を実装します
• アクセシビリティ - キーボード操作とスクリーンリーダーのサポートを確保します

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

はじめに

📄 参照: references/getting-started.md

• インストールとセットアップの手順
• Vite/React プロジェクトの設定
• CSS のインポートとテーマの選択
• 基本的なコンポーネントの初期化
• 対象: 新しい HeatMap の実装を始める場合や、依存関係を設定する場合

データバインディングとセットアップ

📄 参照: references/data-binding.md

• JSON データの形式と構造
• 2D 配列のバインディング
• データ変換の手法
• データの動的な読み込みとバインディング
• 対象: ヒートマップ用のデータを準備する場合や、データ形式について確認する場合

軸の設定

📄 参照: references/axes-configuration.md

• 数値、カテゴリ、日時の軸タイプ
• 軸のプロパティとカスタマイズ
• 軸の反転と反対側への配置
• 軸の間隔とラベルの書式設定
• 対象: 行／列のヘッダーを設定する場合や、軸の動作を設定する場合

凡例、外観、スタイル

📄 参照: references/legend-and-appearance.md

• 凡例の配置、形式、カスタマイズ
• カラーパレットとグラデーションの設定
• サイズと寸法のプロパティ
• レンダリングモード（SVG と Canvas の切り替え）
• テーマのスタイル設定と CSS のカスタマイズ
• 対象: 表示、色、凡例をカスタマイズする場合

操作と選択

📄 参照: references/interaction-and-selection.md

• 選択モードとセルのハイライト表示
• マウスイベントとイベントハンドラー
• ツールチップの設定とカスタマイズ
• セル操作のパターンとベストプラクティス
• 対象: ユーザー操作を実装する場合や、セルのクリック／ホバーを処理する場合

高度な機能とイベント

📄 参照: references/advanced-features.md

• バブルヒートマップの実装
• イベント処理全般（選択、クリック、ホバー、作成）
• レンダリングモードの自動切り替え
• 大規模なデータセットのパフォーマンス最適化
• カスタムレンダリングとセルのスタイル設定
• 対象: 高度な機能を実装する場合や、パフォーマンスを最適化する場合

API リファレンス

📄 参照: references/api-reference.md

• コンポーネント API の全容：props、メソッド、イベント、モデルスキーマ
• cellSettings、legendSettings、paletteSettings、xAxis、yAxis、titleSettings、tooltipSettings や、export、print、clearSelection などの一般的なメソッドをすばやく確認できます
• 対象: props の追加や検証、イベントの接続、高度なカスタマイズの実装を行う場合

アクセシビリティとトラブルシューティング

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

• WCAG への準拠とアクセシビリティ機能
• キーボード操作のサポート
• ARIA 属性とスクリーンリーダーのサポート
• よくある問題と解決策
• EJ1 から EJ2 への移行
• 対象： アクセシビリティの確保や問題の解決

クイックスタート

import * as React from 'react';
import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';
import '@syncfusion/ej2-base/styles/material.css';

export function App() {
  const data = [
    [73, 39, 26, 39, 94],
    [93, 58, 53, 38, 26],
    [54, 39, 26, 40, 42]
  ];

  return (
    <HeatMapComponent 
      id='heatmap'
      dataSource={data}
      xAxis={{ labels: ['A', 'B', 'C', 'D', 'E'] }}
      yAxis={{ labels: ['X', 'Y', 'Z'] }}
      showTooltip={true}
      cellRender={(args) => {
        args.displayText = args.value + '%';
      }}
    >
      <Inject services={[Legend, Tooltip]} />
    </HeatMapComponent>
  );
}

export default App;

よく使われるパターン

パターン 1：基本的なデータの可視化

// Visualize simple 2D data with default styling
<HeatMapComponent 
  dataSource={data}
  xAxis={{ labels: xLabels }}
  yAxis={{ labels: yLabels }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

パターン 2：カスタムカラー、凡例、ツールチップ

// Apply custom color palette with legend and styled tooltips
<HeatMapComponent 
  dataSource={data}
  paletteSettings={{
    type: 'Gradient',
    palette: [
      { value: 0, color: '#3498db' },
      { value: 50, color: '#2ecc71' },
      { value: 100, color: '#e74c3c' }
    ]
  }}
  legendSettings={{ position: 'Right', width: '150px' }}
  showTooltip={true}
  tooltipSettings={{
    fill: '#F5F5F5',
    textStyle: { color: '#333333', size: '13px' },
    border: { width: 1, color: '#999999' }
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

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

// Handle cell selection and display selected data
<HeatMapComponent 
  dataSource={data}
  cellSelected={(args) => {
    console.log(`Cell [${args.row}, ${args.column}] selected: ${args.value}`);
  }}
  cellRender={(args) => {
    args.displayText = args.value + ' units';
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

主なプロパティ

プロパティ	型	目的	例
dataSource	配列	2 次元データ配列または JSON	[[1,2],[3,4]]
xAxis	オブジェクト	列軸の設定	{ labels: ['A', 'B'] }
yAxis	オブジェクト	行軸の設定	{ labels: ['X', 'Y'] }
paletteSettings	オブジェクト	カラーパレットとグラデーションの設定	{ type: 'Gradient', palette: [{value: 0, color: '#blue'}] }
cellRender	関数	セルの書式設定	表示テキストを整形
cellSelected	関数	選択イベントハンドラー	ユーザーの選択を追跡
legendSettings	オブジェクト	凡例の配置／形式	{ position: 'Right' }
showTooltip	ブール値	ツールチップの有効化／無効化	true または false
tooltipSettings	オブジェクト	ツールチップのスタイル設定（塗りつぶし、テキストスタイル、境界線）	{ fill: '#F5F5F5', textStyle: { color: '#333' } }
renderingMode	文字列	SVG または Canvas	大規模なデータセットには 'Canvas'

よくある使用例

1. パフォーマンスダッシュボード - 部門や期間ごとの指標を表示
2. 相関行列 - 変数間の関係を可視化
3. アクティビティヒートマップ - 曜日や時間帯ごとのユーザーエンゲージメントのパターンを表示
4. 遺伝子発現 - 色の強度を使って生物学的データを分析
5. トラフィックパターン - ネットワーク／ウェブサイトのトラフィック分布を可視化
6. アンケート結果 - 質問や属性ごとの回答パターンを表示

---