syncfusion-aspnetcore-treemap

ASP.NET Core で Syncfusion TreeMap を実装する

Syncfusion TreeMap コントロールは、各項目の領域がその数値を表す入れ子状の長方形を使用して、階層データを視覚化します。組織構造、予算配分、市場セグメント、人口分布、販売実績など、サイズに基づく視覚表現が必要なあらゆる階層データの表示に適しています。

目次

• このスキルを使用する場面
• コンポーネントの概要
• ドキュメントとナビゲーションガイド
  • はじめに
  • データの整理
  • ビジュアルレイアウト
  • 階層構造の整理
  • リーフ項目の表示
  • 色マッピングの方法
  • データ表示ラベル -- ツールチップ
  • インタラクティブ機能
  • 公開 -- アクセシビリティ
  • 高度なカスタマイズ
• クイックスタートの例
• 一般的なパターン
  • パターン 1 ヘッダー付きの複数レベル階層
  • パターン 2 範囲ベースの色マッピング
  • パターン 3 パンくずリスト付きのインタラクティブなドリルダウン
• 主要なプロパティ
• 次のステップ
• よくある間違いと今後の参考資料

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

次のことが必要な場合は、TreeMap スキルを使用します。

• 複数のレベルを持つ階層データを視覚化する。たとえば、大陸 → 国 → 都市などです。
• 長方形のサイズが数値を表す入れ子状のカテゴリを表示する。
• ドリルダウンによる探索を可能にする。ユーザーが階層の各レベルを移動できるようにします。
• 色マッピングを適用する。値の範囲、カテゴリ、パフォーマンス指標を表示します。
• 選択、ハイライト、ツールチップ、凡例などのインタラクティブ機能を追加する。
• カスタムヘッダー、グループ化、ラベル書式設定を使用して複数レベルの表示を作成する。

コンポーネントの概要

TreeMap コントロールは、SVG を使用して階層データを入れ子状の長方形として描画します。次の機能をサポートしています。

• Squarified、SliceAndDiceVertical、SliceAndDiceHorizontal、SliceAndDiceAuto などの複数のレイアウトタイプ。
• groupPath を使用した階層レベル。フラットデータを視覚的なグループに整理します。
• 色マッピング。範囲ベース、均等／カテゴリベース、彩度低下、不透明度、パレットベースの設定を使用します。
• インタラクティブなドリルダウン。親グループから子グループに移動できます。
• データラベルとツールチップ。関連情報を表示します。
• 選択モードとハイライトモード。ユーザーとのインタラクションを実現します。
• 印刷とエクスポート。PNG、JPEG、SVG、PDF 形式で出力できます。
• アクセシビリティのサポート。キーボード操作とスクリーンリーダーに対応した描画を提供します。

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

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの設定
• ASP.NET Core での Syncfusion サービスの登録
• 最初の TreeMap コントロールの作成
• 基本的なデータバインディングと描画
• 一般的な初期設定

データの整理

📄 参照: references/data-binding.md

• フラットなコレクションのデータバインディング
• 階層コレクションのデータバインディング
• データソースのフィールドマッピングパターン
• データ構造のベストプラクティス
• weightValuePath による値フィールドのマッピング

ビジュアルレイアウト

📄 参照: references/layouts.md

• Squarified や Slice-and-Dice 系のレイアウトなどのレイアウトタイプ
• データに適したレイアウトの選択
• 右から左への描画のサポート
• 描画方向とレイアウトの動作

階層構造

📄 参照: references/levels-and-hierarchy.md

• groupPath を使用した複数レベルの階層構造
• headerFormat を使用したヘッダーのカスタマイズ
• グループ間の隙間と間隔
• ヘッダーテンプレートと配置

リーフ項目（リーフレベルの表示）

📄 参照: references/leaf-items.md

• リーフ項目の描画と外観
• ラベルの配置と書式設定
• ラベルテンプレートとカスタマイズ
• 項目間の隙間と間隔

色マッピングの方法

📄 参照: references/color-mapping.md

• 連続する数値の範囲色マッピング
• 離散カテゴリの均等色マッピング
• 彩度低下と不透明度に基づくマッピング
• データからのパレットおよび直接的な色のバインド

データ表示（ラベルとツールチップ）

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

• データラベルの書式設定とテンプレート
• ラベルの重なりへの対処
• ツールチップの表示と書式設定
• ツールチップのテンプレートとカスタムコンテンツ

インタラクティブ機能

📄 参照: references/interactive-features.md

• 選択モードとカスタマイズ
• ハイライトの動作とスタイル設定
• ドリルダウン機能
• パンくずリスト形式のナビゲーション動作
• パフォーマンスを高めるオンデマンドのデータ読み込みパターン

公開とアクセシビリティ

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

• 印刷機能
• PNG、JPEG、SVG 形式での画像エクスポート
• 向きの設定を指定した PDF エクスポート
• プログラムで使用するための Base64 エクスポート
• アクセシビリティとスクリーンリーダーのサポート

高度なカスタマイズ

📄 参照: references/advanced-customization.md

• 国際化と数値の書式設定
• 凡例のカスタマイズとインタラクティブモード
• 実際のユースケースでのカスタマイズパターン
• 旧 API からの移行ガイド

クイックスタートの例

@page
@using Syncfusion.EJ2.TreeMap

@{
    List<TreeMapData> data = new List<TreeMapData>
    {
        new TreeMapData { Name = "Electronics", Category = "Tech", Sales = 5000 },
        new TreeMapData { Name = "Furniture", Category = "Home", Sales = 3000 }
    };

    ViewBag.data = data;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.data"
             weightValuePath="Sales"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="Name">
    </e-treemap-leafitemsettings>
    <e-treemap-levels>
        <e-treemap-level groupPath="Category"
                         headerFormat="${Category}"
                         fill="#336699">
        </e-treemap-level>
    </e-treemap-levels>
</ejs-treemap>

@functions {
    public class TreeMapData
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public double Sales { get; set; }
    }
}

よく使われるパターン

パターン 1：ヘッダー付きの複数レベル階層

大陸 → 国 → 都市の 3 レベルの TreeMap を作成し、書式設定したヘッダーを表示します。

@page
@{
    List<PopulationData> populationData = new List<PopulationData>
    {
        new PopulationData { Continent = "Asia", Country = "India", City = "Chennai", Population = 12000000 },
        new PopulationData { Continent = "Asia", Country = "India", City = "Mumbai", Population = 20000000 },
        new PopulationData { Continent = "Europe", Country = "Germany", City = "Berlin", Population = 3600000 }
    };

    ViewBag.populationData = populationData;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.populationData"
             weightValuePath="Population"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="City">
    </e-treemap-leafitemsettings>
    <e-treemap-levels>
        <e-treemap-level groupPath="Continent"
                         headerFormat="${Continent}">
        </e-treemap-level>
        <e-treemap-level groupPath="Country"
                         headerFormat="${Country}">
        </e-treemap-level>
    </e-treemap-levels>
</ejs-treemap>

@functions {
    public class PopulationData
    {
        public string Continent { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public double Population { get; set; }
    }
}

パターン 2：範囲に基づく色マッピング

売上実績を低・中・高に分けるなど、値の範囲に基づいて色を適用します。

@page
@{
    List<SalesData> salesData = new List<SalesData>
    {
        new SalesData { Name = "Electronics", Category = "Technology", Sales = 4500 },
        new SalesData { Name = "Furniture", Category = "Home", Sales = 8500 },
        new SalesData { Name = "Appliances", Category = "Home", Sales = 12500 }
    };

    ViewBag.salesData = salesData;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.salesData"
             weightValuePath="Sales"
             rangeColorValuePath="Sales"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="Name">
        <e-leafitemsettings-colormappings>
            <e-leafitemsettings-colormapping From="0"
                                             To="5000"
                                             Color=@("#66BB6A")>
            </e-leafitemsettings-colormapping>
            <e-leafitemsettings-colormapping From="5000"
                                             To="10000"
                                             Color=@("#FDD835")>
            </e-leafitemsettings-colormapping>
            <e-leafitemsettings-colormapping From="10000"
                                             To="15000"
                                             Color=@("#EF5350")>
            </e-leafitemsettings-colormapping>
        </e-leafitemsettings-colormappings>
    </e-treemap-leafitemsettings>
</ejs-treemap>

@functions {
    public class SalesData
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public double Sales { get; set; }
    }
}

パターン 3：パンくずリスト付きのインタラクティブなドリルダウン

enableDrillDown と階層レベルを設定して、階層をたどれるようにします。

@page
@{
    List<DrillDownData> drillDownData = new List<DrillDownData>
    {
        new DrillDownData { Continent = "Asia", Country = "India", State = "Tamil Nadu", Name = "Chennai", Sales = 7000 },
        new DrillDownData { Continent = "Asia", Country = "India", State = "Maharashtra", Name = "Mumbai", Sales = 9000 },
        new DrillDownData { Continent = "Europe", Country = "Germany", State = "Berlin", Name = "Berlin City", Sales = 6000 }
    };

    ViewBag.drillDownData = drillDownData;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.drillDownData"
             weightValuePath="Sales"
             enableDrillDown="true"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="Name">
    </e-treemap-leafitemsettings>
    <e-treemap-levels>
        <e-treemap-level groupPath="Continent"
                         headerFormat="${Continent}">
        </e-treemap-level>
        <e-treemap-level groupPath="Country"
                         headerFormat="${Country}">
        </e-treemap-level>
        <e-treemap-level groupPath="State"
                         headerFormat="${State}">
        </e-treemap-level>
    </e-treemap-levels>
</ejs-treemap>

@functions {
    public class DrillDownData
    {
        public string Continent { get; set; }
        public string Country { get; set; }
        public string State { get; set; }
        public string Name { get; set; }
        public double Sales { get; set; }
    }
}

主なプロパティ

• dataSource - TreeMap の描画に使用するデータコレクションを指定します。
• weightValuePath - 長方形のサイズの計算に使用する数値フィールドをマッピングします。
• layoutType - Squarified、SliceAndDiceVertical、SliceAndDiceHorizontal、SliceAndDiceAuto などのレイアウトアルゴリズムを定義します。
• rangeColorValuePath - 範囲に基づく色マッピングに使用する数値フィールドをマッピングします。
• equalColorValuePath - 均等値またはカテゴリに基づく色マッピングに使用するフィールドをマッピングします。
• enableDrillDown - 階層をたどるドリルダウンナビゲーションを有効にします。
• enableRtl - 右から左への描画のサポートを有効にします。
• levels - 1 つ以上の groupPath レベルを使用して、階層グループを定義します。
• leafItemSettings - ラベル、隙間、テンプレート、色マッピングなど、リーフ項目の外観を設定します。
• colorMapping - 値の範囲、均等値、不透明度、彩度低下に基づいて色を適用するルールを定義します。

次のステップ

1. データの形状と読みやすさの要件に基づいて、レイアウトの種類を選択します。
2. グループ化フィールドを含むフラットデータ、または階層データとして、データ構造を準備します。
3. 長方形のサイズ設定に使用する数値を表すように、**weightValuePath**を設定します。
4. 指標、カテゴリ、パフォーマンス範囲を視覚化するために、色のマッピングを設定します。
5. ドリルダウン、選択、ハイライト、ツールチップ、凡例などのインタラクティブ機能を追加します。
6. 読みやすさを向上させるために、ラベル、ヘッダー、書式をカスタマイズします。
7. 本番環境で必要な場合は、アクセシビリティとエクスポートのオプションを有効にします。