syncfusion-angular-treemap

Syncfusion Angular TreeMap の実装

TreeMap コンポーネントは、階層データやグループ化されたデータを入れ子状の長方形として可視化します。各長方形はデータ項目を表し、そのサイズは weightValuePath を通じて数値フィールドにマッピングされます。TreeMap は、製品カテゴリ、地域別内訳、市場セグメントなど、相対的な規模が重要となるグループ化されたデータセットの表示に役立ちます。

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

• 階層データの可視化：地域、部門、製品カテゴリなどのグループ化されたデータや複数レベルのデータを表示します
• 複数レベルのデータ可視化：levels と groupPath を使用して親子関係を表示します
• ドリルダウンインターフェイスの作成：階層レベル間のインタラクティブな移動を可能にします
• データの色分け：範囲、均等、彩度低下、パレット、または直接的な色のバインドを使用します
• インタラクティブ機能の追加：選択、ハイライト、クリック、ダブルクリック、右クリックの操作を実装します
• 外観のカスタマイズ：レイアウト、色、境界線、ラベル、ヘッダー、凡例、テンプレートを変更します
• 補足情報の表示：ラベル、ツールチップ、凡例、書式設定された値を追加します
• 可視化のエクスポート：PNG、JPEG、SVG、または PDF として印刷またはエクスポートします
• 国際化への対応：RTL、ロケール固有の数値書式、カルチャに応じた表示を有効にします
• アクセシビリティ：スクリーンリーダーのサポート、ARIA の命名、コントラスト、フォーカスの動作を改善します

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

目的に応じて、参照先を選択してください。

API リファレンス

📄 参照先： references/api-reference.md

はじめに

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

• インストールと npm パッケージのセットアップ
• TreeMapModule のインポート
• 最初の TreeMap コンポーネントの作成
• テーマとスタイルの設定
• シンプルなデータを使用した基本的なコンポーネント

データバインディング

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

• フラットなコレクションのバインド
• levels を使用したデータのグループ化
• データソースのプロパティと TreeMap フィールドのマッピング
• 項目のサイズ設定のための weightValuePath の構成
• 動的なデータ更新と状態駆動型バインディング

色のマッピング

📄 参照先： references/color-mapping.md

• 数値向けの範囲色マッピング
• カテゴリ別の色分けに使用する均等色マッピング
• 不透明度を使用した彩度低下の色マッピング
• パレットベースの色分け
• colorValuePath による直接的な色のバインド
• leafItemSettings.colorMapping によるグラデーションカラー

ドリルダウンとナビゲーション

📄 参照先： references/drilldown-and-navigation.md

• ドリルダウン機能の有効化
• levels を使用した親子間のナビゲーション
• drillDownView の動作
• パンくずナビゲーション
• ドリルイベント（drillStart、drillEnd）
• 必要に応じて、アプリケーションの状態を通じてルートにリセット

レベルとレイアウト

📄 参照先： references/levels-and-layout.md

• 複数の階層レベルの構成
• groupPath とグループ化されたレンダリング
• レイアウトタイプ（Squarified、SliceAndDiceVertical、SliceAndDiceHorizontal、SliceAndDiceAuto）
• グループ間隔とリーフの間隔
• ヘッダーの書式設定とスタイル設定
• ヘッダーテンプレートとヘッダーのサイズ設定

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

📄 参照先： references/labels-tooltips-legend.md

• データラベルの構成と書式設定
• ラベルテンプレートとテンプレートの配置
• ラベルの重なりとオーバーフローへの対処
• ツールチップの表示と書式設定
• カスタムツールチップテンプレート
• 凡例の表示と構成
• 凡例と色のマッピング、選択、ハイライトの連携

選択とインタラクティブ操作

📄 参照先： references/selection-interactivity.md

• 選択とハイライトの有効化
• 選択色と境界線のカスタマイズ
• 凡例による選択とホバー操作
• クリック、項目選択、ダブルクリック、右クリックのイベント
• selectItem(...) によるプログラムからの選択
• アプリケーションの状態で単一項目または複数項目のワークフローを管理

印刷、エクスポート、アクセシビリティ

📄 参照： references/print-export-accessibility.md

• 印刷機能
• 画像エクスポート（PNG、JPEG、SVG）
• 向きのオプションを指定した PDF エクスポート
• Base64 エクスポートの処理
• WCAG アクセシビリティ対応
• スクリーンリーダー対応と ARIA ラベル
• コントラストとフォーカスに関する考慮事項

国際化

📄 参照： references/internationalization.md

• 右から左（RTL）へのレンダリング
• ロケール設定と数値の書式設定
• ラベルとツールチップのグローバル化
• レンダリング方向の設定
• 多言語データバインディング
• setCulture() と setCurrencyCode() による文化的なカスタマイズ

クイックスタート

import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Size"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Category: 'Electronics', Item: 'Laptops', Size: 150 },
    { Category: 'Electronics', Item: 'Phones', Size: 200 },
    { Category: 'Furniture', Item: 'Chairs', Size: 100 },
    { Category: 'Furniture', Item: 'Tables', Size: 120 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public leafItemSettings = {
    labelPath: 'Item',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}

一般的なパターン

パターン 1：基本的な階層型の可視化

levels と groupPath を使用して、グループ化された階層データを表示します。

public levels = [
  { groupPath: 'Region', headerFormat: '${Region}' },
  { groupPath: 'Country', headerFormat: '${Country}' }
];

public leafItemSettings = {
  labelPath: 'Country'
};

パターン 2：値に基づく色分け

rangeColorValuePath と leafItemSettings.colorMapping を使用して、範囲に基づく色分けを行います。

<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Value"
  rangeColorValuePath="Value"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>

public leafItemSettings = {
  labelPath: 'Name',
  colorMapping: [
    { from: 0, to: 50, color: '#3498db' },
    { from: 50, to: 100, color: '#e74c3c' }
  ]
};

パターン 3：インタラクティブなドリルダウン

パンくずナビゲーションを有効にして、グループ化された階層をたどれるようにします。

<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Value"
  [enableDrillDown]="true"
  [enableBreadcrumb]="true"
  breadcrumbConnector=" / "
  [levels]="levels"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>

主なプロパティと設定

プロパティ	型	用途
dataSource	object[]	TreeMap アイテムのデータコレクション
weightValuePath	string	各アイテムのサイズに使用する数値フィールド
leafItemSettings	object	ラベル、境界線、テンプレート、色分けなどのリーフアイテム設定
levels	object[]	groupPath とヘッダー設定を使用した階層設定
layoutType	'Squarified' | 'SliceAndDiceVertical' | 'SliceAndDiceHorizontal' | 'SliceAndDiceAuto'	矩形の配置アルゴリズム
colorValuePath	string	アイテムの色を直接割り当てるために使用するデータフィールド
equalColorValuePath	string	カテゴリに基づく色分けに使用するデータフィールド
rangeColorValuePath	string	数値範囲に基づく色分けに使用するデータフィールド
enableDrillDown	boolean	グループ化された階層をたどるドリルダウンナビゲーションを有効にします
enableBreadcrumb	boolean	ドリルダウン中にパンくずナビゲーションを表示します
legendSettings	object	凡例の表示とスタイルの設定
tooltipSettings	object	ツールチップの表示、書式設定、テンプレートの設定
selectionSettings	object	選択時の外観と動作の設定
highlightSettings	object	ホバー時のハイライト表示の設定
enableRtl	boolean	右から左へのレンダリングを有効にします
locale	string	コンポーネントのカルチャを上書きします
format	string	n2、c、p などの数値書式を適用します
useGroupingSeparator	boolean	カルチャに応じた数値の桁区切り記号を有効にします
allowPrint	boolean	印刷機能を有効にします
allowImageExport	boolean	画像エクスポート機能を有効にします
allowPdfExport	boolean	PDF エクスポート機能を有効にします
description	string	コンポーネントの説明的なアクセシビリティテキストを追加します
tabIndex	number	TreeMap コンテナーのフォーカス順序を制御します

実装に関する注意事項

• 単独で使用する Angular コンポーネントに特化する場合は、TreeMapModule を優先してください。
• 対応する機能を有効にする場合に限り、TreeMapLegendService、TreeMapTooltipService、TreeMapSelectionService、TreeMapHighlightService、PrintService、ImageExportService、PdfExportService を使用してください。
• 色分けには、leafItemSettings.colorMapping を設定し、必要に応じて equalColorValuePath または rangeColorValuePath と組み合わせてください。
• プログラムから選択する場合は、サポートされていないヘルパーメソッドではなく、selectItem(levelOrder, isSelected?) を使用してください。
• アクセシビリティには、TreeMap に組み込まれた ARIA 対応、意味のあるタイトル、ラベル、凡例、説明、十分な色のコントラストを活用してください。
• キーボード操作や高度なインタラクションのワークフローでは、文書化されていない TreeMap の追加キーボード API があると想定せず、必要に応じて周囲に Angular コントロールを用意してください。