syncfusion-aspnetcore-heatmap-chart

Name: syncfusion-aspnetcore-heatmap-chart
Author: syncfusion

github.com/syncfusionデザイン・UI052 回インストール2 週間前に更新

リポジトリ

syncfusion-aspnetcore-heatmap-chart について

ASP.NET Core Razor Pages で Syncfusion HeatMap Chart を実装するガイドです。マトリックス可視化向けに、データバインド、色マッピング、描画方式、セル操作を扱います。

主な機能

01配列、JSON、リモート、C# データのバインド
02カテゴリ、数値、日時軸の設定
03グラデーションまたは固定パレットで値を色分け
04SVG、Canvas、Auto による描画
05ラベル、凡例、ツールチップの追加
06セル選択とイベント処理

活用シーン

01売上や在庫のマトリックス表示
02出勤状況や生産性パターンの確認
03相関、温度、密度データの表示
04センサー値や時系列活動の分析

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-heatmap-chart

インストール後、Claude Code で/syncfusion-aspnetcore-heatmap-chartを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

advanced-scenarios.md

api-reference.md

appearance-styling.md

axis-configuration.md

bubble-heatmap.md

data-binding-rendering.md

getting-started.md

legend-palette.md

tooltips-selection.md

詳細

Syncfusion HeatMap Chart の実装

このスキルを使用する場面
コンポーネントの概要
- 主な機能
ドキュメントとナビゲーションガイド
クイックスタートの例
- Pages/Index.cshtml
- Pages/Index.cshtml.cs
一般的なパターン
主なプロパティと設定
一般的なユースケース

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

次のような場合にこのスキルを使用します。

色分けされたセルを使って、2 次元のマトリックスデータを可視化する。
ビジネス、科学、運用、分析の値をグリッドレイアウトで表示する。
ASP.NET Core Razor Pages で C# コレクションから HeatMap データをバインドする。
HeatMap のマークアップを Index.cshtml に配置し、データの準備と設定を Index.cshtml.cs に分ける。
カテゴリ軸、数値軸、または日時軸を設定する。
タイトル、凡例、ツールチップ、セルラベル、パレットをカスタマイズする。
連続値または分類済みの値にグラデーションまたは固定の色マッピングを使用する。
セル選択を有効にし、HeatMap のイベントを処理する。
より大きなデータセットで適切なレンダリングモードを使用してパフォーマンスを向上させる。

コンポーネントの概要

Syncfusion ASP.NET Core HeatMap Chart は、色の強度を使って 2 次元データを表現するデータ可視化コンポーネントです。各セルが値を表し、設定されたパレットに基づいてセルの色が計算されます。

次の用途に適しています。

売上実績マトリックス。
出席状況および生産性レポート。
相関行列。
温度や密度の可視化。
在庫状況ダッシュボード。
センサー測定値のグリッド。
時間の経過に伴う使用状況やアクティビティの分析。

主な機能

配列形式および JSON 形式のデータバインディングをサポートします。
カテゴリ軸、数値軸、日時軸をサポートします。
グラデーションパレットと固定パレットをサポートします。
セルラベル、凡例、ツールチップをサポートします。
SVG、Canvas、自動のレンダリングモードをサポートします。
単一セルおよび複数セルの選択をサポートします。
セルのレンダリング、ツールチップのレンダリング、セルの選択など、イベントのカスタマイズをサポートします。
Index.cshtml と Index.cshtml.cs を使用した Razor Pages の実装をサポートします。

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

はじめに

次の内容については、このセクションを参照してください。

必要な Syncfusion ASP.NET Core パッケージのインストール。
Syncfusion Tag Helpers の登録。
Syncfusion のスタイルとスクリプトの追加。
最初の HeatMap Chart の作成。
Razor Pages でのコンポーネントのレンダリング。

Pages/_ViewImports.cshtml で必要な設定を行います。

@using YourApplication
@namespace YourApplication.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2

YourApplication を実際のプロジェクトの名前空間に置き換えます。たとえば、プロジェクト名が AspNetCoreWebApp の場合は、次のようにします。

@using AspNetCoreWebApp
@namespace AspNetCoreWebApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2

Pages/Shared/_Layout.cshtml の head タグ内に、必要なテーマとスクリプトの参照を追加します。

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.3/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js"></script>

Pages/Shared/_Layout.cshtml の閉じる body タグの前に、Syncfusion のスクリプトマネージャーを追加します。

<ejs-scripts></ejs-scripts>

データバインディングとレンダリングモード

HeatMap Chart では、複数の形式でデータをバインドできます。

2 次元配列データ。
JSON テーブルデータ。
JSON セルデータ。
リモートデータ。
強い型付けがされた C# モデルコレクション。

Razor Pages では、データと構成オブジェクトを Index.cshtml.cs に保持し、Index.cshtml で @Model を介してバインドする方法が推奨されます。

レンダリングモード：

SVG：小規模から中規模のデータセットに最適です。
Canvas：大規模なデータセットに最適です。
Auto：コンポーネントが適切なレンダリングモードを選択します。

バブル HeatMap の視覚化

バブル HeatMap は、セルの値をバブルのサイズ、色、またはその両方で表示する場合に便利です。

一般的なバブルオプション：

サイズによるバブル表示。
色によるバブル表示。
セクターによるバブル表示。
サイズと色によるバブル表示。

各セルを通常の長方形タイルよりも視覚的に区別する必要がある場合は、バブル HeatMap を使用します。

外観とスタイル設定

HeatMap の外観は、次の項目を使用してカスタマイズできます。

titleSettings
cellSettings
paletteSettings
legendSettings
tooltipSettings
backgroundColor
margin
height
width

ASP.NET Core Razor Pages では、強い型付けがされたオブジェクトを Index.cshtml.cs で宣言し、Index.cshtml から Tag Helper に渡します。

軸の構成

HeatMap Chart は、次の軸の値の型をサポートしています。

Category
Numeric
DateTime

ラベルが月、製品、地域、部門などの名前の場合は、カテゴリ軸を使用します。

X 値と Y 値がインデックスベースまたは数値範囲の場合は、数値軸を使用します。

値が日付や時間間隔を表す場合は、日時軸を使用します。

凡例とパレットのシステム

色と値の対応関係を説明するには、凡例を使用します。

パレットの種類：

Gradient：連続値に最適です。
Fixed：分類された値やしきい値に最適です。

凡例の位置：

Right
Left
Top
Bottom

ツールチップとセル選択

HeatMap で showTooltip="true" を設定すると、ツールチップを有効にできます。

ツールチップのスタイルは tooltipSettings でカスタマイズできます。

次のコードを使用すると、セル選択を有効にできます。

allowSelection="true"
enableMultiSelect="true"

カスタムのインタラクションロジックが必要な場合は、cellSelected、cellClick、tooltipRender などのイベントを使用します。

高度なシナリオとベストプラクティス

推奨されるベストプラクティス：

Index.cshtml には UI マークアップのみを記述します。
データ、パレット、フォントスタイル、ラベル、強い型付けがされたモデルは Index.cshtml.cs に保持します。
すべての Razor Page バインディングに @Model.PropertyName を使用します。
レスポンシブなパフォーマンス動作には renderingMode="Auto" を使用します。
非常に大規模なデータセットには showLabel="false" を使用します。
データを再利用する場合は、匿名オブジェクトではなく強い型付けがされたクラスを使用します。
JSON 形式のセルマッピングが必要な場合は、dataSourceSettings を使用します。
Index.cshtml.cs、Index.cshtml、_ViewImports.cshtml の名前空間を一致させます。
.cshtml ファイルでは、実際の Razor/HTML タグを使用します。実際の Razor ファイルに <ejs-heatmap> のようなエンコード済みタグを貼り付けないでください。

クイックスタートの例

次の例では、Index.cshtml と Index.cshtml.cs の両方を使用した、完全な ASP.NET Core Razor Pages HeatMap Chart の実装を示します。

このバージョンでは Razor ファイルを簡潔に保ち、データ生成、パレットの構成、タイトルのスタイル設定、ツールチップのスタイル設定、ラベルを PageModel に移しています。

YourApplication を実際のプロジェクトの名前空間に置き換えてください。たとえば、プロジェクト名が AspNetCoreWebApp の場合は、AspNetCoreWebApp.Pages を使用します。

Pages/Index.cshtml

@page
@model YourApplication.Pages.IndexModel

<ejs-heatmap
    id="heatmap"
    dataSource="@Model.DataSource"
    showTooltip="true"
    renderingMode="Auto"
    allowSelection="true"
    enableMultiSelect="true">

    <e-heatmap-titlesettings
        text="Sales Performance HeatMap"
        textStyle="@Model.TitleTextStyle">
    </e-heatmap-titlesettings>

    <e-heatmap-xaxis
        valueType="Category"
        labels="@Model.XAxisLabels">
    </e-heatmap-xaxis>

    <e-heatmap-yaxis
        valueType="Category"
        labels="@Model.YAxisLabels">
    </e-heatmap-yaxis>

    <e-heatmap-datasourcesettings
        isJsonData="true"
        adaptorType="Cell"
        xDataMapping="XValue"
        yDataMapping="YValue"
        valueMapping="Value">
    </e-heatmap-datasourcesettings>

    <e-heatmap-cellsettings
        showLabel="true"
        format="{value}"
        textStyle="@Model.CellTextStyle">
    </e-heatmap-cellsettings>

    <e-heatmap-palettesettings
        type="Gradient"
        palette="@Model.Palette">
    </e-heatmap-palettesettings>

    <e-heatmap-legendsettings
        visible="true"
        position="Right"
        showLabel="true"
        height="150">
    </e-heatmap-legendsettings>

    <e-heatmap-tooltipsettings
        textStyle="@Model.TooltipTextStyle">
    </e-heatmap-tooltipsettings>
</ejs-heatmap>

Pages/Index.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using Syncfusion.EJ2.HeatMap;
using System.Collections.Generic;

namespace YourApplication.Pages
{
    public class IndexModel : PageModel
    {
        public List<HeatMapDataPoint> DataSource { get; set; } = new List<HeatMapDataPoint>();

        public string[] XAxisLabels { get; set; } =
        {
            "Jan", "Feb", "Mar", "Apr", "May"
        };

        public string[] YAxisLabels { get; set; } =
        {
            "Product A", "Product B", "Product C", "Product D", "Product E"
        };

        public HeatMapFont TitleTextStyle { get; set; } = new HeatMapFont
        {
            Size = "15px",
            FontWeight = "500",
            FontStyle = "Normal",
            FontFamily = "Segoe UI"
        };

        public HeatMapFont CellTextStyle { get; set; } = new HeatMapFont
        {
            FontFamily = "Segoe UI",
            Size = "12px",
            FontWeight = "400"
        };

        public HeatMapFont TooltipTextStyle { get; set; } = new HeatMapFont
        {
            Color = "#FFFFFF",
            FontFamily = "Segoe UI"
        };

        public List<HeatMapPalette> Palette { get; set; } = new List<HeatMapPalette>
        {
            new HeatMapPalette { Value = 0, Color = "#C2E7EC", Label = "Very Low" },
            new HeatMapPalette { Value = 25, Color = "#AED6DC", Label = "Low" },
            new HeatMapPalette { Value = 50, Color = "#87C1C9", Label = "Medium" },
            new HeatMapPalette { Value = 75, Color = "#4CA3AF", Label = "High" },
            new HeatMapPalette { Value = 100, Color = "#1B7280", Label = "Very High" }
        };

        public List<HeatMapPalette> FixedPalette { get; set; } = new List<HeatMapPalette>
        {
            new HeatMapPalette { Value = 0, Color = "#DFF6DD", Label = "Low" },
            new HeatMapPalette { Value = 50, Color = "#FFF4CE", Label = "Medium" },
            new HeatMapPalette { Value = 80, Color = "#FDE7E9", Label = "High" }
        };

        public void OnGet()
        {
            DataSource = new List<HeatMapDataPoint>
            {
                new HeatMapDataPoint { XValue = "Jan", YValue = "Product A", Value = 73 },
                new HeatMapDataPoint { XValue = "Feb", YValue = "Product A", Value = 39 },
                new HeatMapDataPoint { XValue = "Mar", YValue = "Product A", Value = 26 },
                new HeatMapDataPoint { XValue = "Apr", YValue = "Product A", Value = 39 },
                new HeatMapDataPoint { XValue = "May", YValue = "Product A", Value = 94 },

                new HeatMapDataPoint { XValue = "Jan", YValue = "Product B", Value = 93 },
                new HeatMapDataPoint { XValue = "Feb", YValue = "Product B", Value = 58 },
                new HeatMapDataPoint { XValue = "Mar", YValue = "Product B", Value = 53 },
                new HeatMapDataPoint { XValue = "Apr", YValue = "Product B", Value = 38 },
                new HeatMapDataPoint { XValue = "May", YValue = "Product B", Value = 26 },

                new HeatMapDataPoint { XValue = "Jan", YValue = "Product C", Value = 99 },
                new HeatMapDataPoint { XValue = "Feb", YValue = "Product C", Value = 28 },
                new HeatMapDataPoint { XValue = "Mar", YValue = "Product C", Value = 22 },
                new HeatMapDataPoint { XValue = "Apr", YValue = "Product C", Value = 4 },
                new HeatMapDataPoint { XValue = "May", YValue = "Product C", Value = 66 },

                new HeatMapDataPoint { XValue = "Jan", YValue = "Product D", Value = 14 },
                new HeatMapDataPoint { XValue = "Feb", YValue = "Product D", Value = 26 },
                new HeatMapDataPoint { XValue = "Mar", YValue = "Product D", Value = 97 },
                new HeatMapDataPoint { XValue = "Apr", YValue = "Product D", Value = 69 },
                new HeatMapDataPoint { XValue = "May", YValue = "Product D", Value = 69 },

                new HeatMapDataPoint { XValue = "Jan", YValue = "Product E", Value = 7 },
                new HeatMapDataPoint { XValue = "Feb", YValue = "Product E", Value = 46 },
                new HeatMapDataPoint { XValue = "Mar", YValue = "Product E", Value = 47 },
                new HeatMapDataPoint { XValue = "Apr", YValue = "Product E", Value = 47 },
                new HeatMapDataPoint { XValue = "May", YValue = "Product E", Value = 88 }
            };
        }
    }

    public class HeatMapDataPoint
    {
        public string XValue { get; set; } = string.Empty;

        public string YValue { get; set; } = string.Empty;

        public double Value { get; set; }
    }
}

一般的なパターン

パターン 1：ラベル付きのカテゴリ軸

月、製品、チーム、地域、部門など、名前付きの行見出しや列見出しを表示する場合は、カテゴリ軸を使用します。

推奨される使用方法：

必要な軸に valueType="Category" を設定します。
Index.cshtml.cs から string[] としてラベルを指定します。
Index.cshtml で @Model.XAxisLabels と @Model.YAxisLabels を使用してラベルをバインドします。

Index.cshtml での構成例：

<e-heatmap-xaxis
    valueType="Category"
    labels="@Model.XAxisLabels">
</e-heatmap-xaxis>

<e-heatmap-yaxis
    valueType="Category"
    labels="@Model.YAxisLabels">
</e-heatmap-yaxis>

Index.cshtml.cs での構成例：

public string[] XAxisLabels { get; set; } =
{
    "Jan", "Feb", "Mar", "Apr", "May"
};

public string[] YAxisLabels { get; set; } =
{
    "Product A", "Product B", "Product C", "Product D", "Product E"
};

パターン 2：グラデーションカラーマッピング

値が連続的で、複数のカラーストップ間で補間する必要がある場合は、グラデーションカラーマッピングを使用します。

推奨される使用方法：

paletteSettings で type="Gradient" を設定します。
Index.cshtml.cs でパレットを List<HeatMapPalette> として定義します。
スコア、密度、温度、トラフィック強度、使用率、パフォーマンス値に使用します。

Index.cshtml での設定例：

<e-heatmap-palettesettings
    type="Gradient"
    palette="@Model.Palette">
</e-heatmap-palettesettings>

Index.cshtml.cs での設定例：

public List<HeatMapPalette> Palette { get; set; } = new List<HeatMapPalette>
{
    new HeatMapPalette { Value = 0, Color = "#C2E7EC", Label = "Very Low" },
    new HeatMapPalette { Value = 25, Color = "#AED6DC", Label = "Low" },
    new HeatMapPalette { Value = 50, Color = "#87C1C9", Label = "Medium" },
    new HeatMapPalette { Value = 75, Color = "#4CA3AF", Label = "High" },
    new HeatMapPalette { Value = 100, Color = "#1B7280", Label = "Very High" }
};

パターン 3：固定パレットによる分類

値が離散的な範囲、ステータス、または分類レベルを表す場合は、固定パレットマッピングを使用します。

推奨される使用方法：

paletteSettings で type="Fixed" を設定します。
Index.cshtml.cs でパレットを List<HeatMapPalette> として定義します。
Razor ファイルで使用するプロパティ名が PageModel に存在することを確認します。
リスクレベル、可用性の状態、SLA ステータス、またはカテゴリベースのヒートマップに使用します。

次のスニペットは、FixedPalette が Index.cshtml.cs に存在し、スニペットを .cshtml ファイルに実際のタグとして貼り付けた場合にのみ動作します。

Index.cshtml での正しい使用方法：

<e-heatmap-palettesettings
    type="Fixed"
    palette="@Model.FixedPalette">
</e-heatmap-palettesettings>

以下のエンコードされたバージョンを実際の .cshtml ファイルに貼り付けないでください：

&lt;e-heatmap-palettesettings
    type="Fixed"
    palette="@Model.FixedPalette"&gt;
&lt;/e-heatmap-palettesettings&gt;

Index.cshtml.cs に必要なプロパティ：

public List<HeatMapPalette> FixedPalette { get; set; } = new List<HeatMapPalette>
{
    new HeatMapPalette { Value = 0, Color = "#DFF6DD", Label = "Low" },
    new HeatMapPalette { Value = 50, Color = "#FFF4CE", Label = "Medium" },
    new HeatMapPalette { Value = 80, Color = "#FDE7E9", Label = "High" }
};

メインのクイックスタートサンプルで固定パレットを使用する場合は、次のブロックを置き換えます：

<e-heatmap-palettesettings
    type="Gradient"
    palette="@Model.Palette">
</e-heatmap-palettesettings>

次のブロックに置き換えます：

<e-heatmap-palettesettings
    type="Fixed"
    palette="@Model.FixedPalette">
</e-heatmap-palettesettings>

パターン 4：レスポンシブな描画

中規模または大規模なデータセットを扱う場合は、レスポンシブな描画方法を使用します。

推奨される使用方法：

小規模なデータセットには renderingMode="SVG" を使用します。
大規模なデータセットには renderingMode="Canvas" を使用します。
コンポーネントに適切な描画モードを判定させる場合は、renderingMode="Auto" を使用します。
データ密度が高い場合はラベルを無効にします。
数千個のセルに対して複雑なラベルテンプレートを使用しないでください。

Index.cshtml での設定例：

<ejs-heatmap
    id="heatmap"
    dataSource="@Model.DataSource"
    renderingMode="Auto">

    <e-heatmap-cellsettings
        showLabel="false">
    </e-heatmap-cellsettings>
</ejs-heatmap>

主なプロパティと設定

必須の設定

dataSource：HeatMap にデータコレクションを割り当てます。
xAxis.valueType：X 軸の値の型を定義します。一般的な値は Category、Numeric、DateTime です。
yAxis.valueType：Y 軸の値の型を定義します。一般的な値は Category、Numeric、DateTime です。
dataSourceSettings：JSON スタイルのオブジェクトマッピングを使用する場合に必要です。
dataSourceSettings.isJsonData：オブジェクトコレクションをバインドする場合は、これを true に設定します。
dataSourceSettings.adaptorType：セルベースのレコードには Cell を使用します。
dataSourceSettings.xDataMapping：X 値のフィールドをマッピングします。
dataSourceSettings.yDataMapping：Y 値のフィールドをマッピングします。
dataSourceSettings.valueMapping：セル値のフィールドをマッピングします。

セルのカスタマイズ

cellSettings.showLabel：セル内に値を表示します。
cellSettings.format：表示するセル値の形式を設定します。
cellSettings.textStyle：ラベルのフォントスタイルをカスタマイズします。
cellSettings.tileType：長方形のセルやバブルセルなど、タイルの種類を定義します。

外観

backgroundColor：HeatMap の背景色を定義します。
margin：HeatMap の周囲の余白を定義します。
titleSettings.text：HeatMap のタイトルを定義します。
titleSettings.textStyle：タイトルのフォントスタイルを定義します。
height：コンポーネントの高さを定義します。
width：コンポーネントの幅を定義します。

凡例の設定

legendSettings.visible：凡例の表示／非表示を切り替えます。
legendSettings.position：凡例の位置を定義します。
legendSettings.type：凡例の種類を定義します。
legendSettings.showLabel：凡例ラベルの表示／非表示を切り替えます。
legendSettings.height：凡例の高さを定義します。
legendSettings.width：凡例の幅を定義します。
legendSettings.toggleVisibility：該当する場合に、凡例による表示／非表示の切り替えを有効にします。

パレット

paletteSettings.type：パレットの動作を定義します。一般的な値は Gradient と Fixed です。
paletteSettings.palette：型が厳密に指定された List<HeatMapPalette> を割り当てます。
HeatMapPalette.Value：値のしきい値を定義します。
HeatMapPalette.Color：しきい値の色を定義します。
HeatMapPalette.Label：パレット項目のラベルを定義します。

一般的なユースケース

月別・部門別の従業員パフォーマンスマトリックス。
地域別・期間別の製品売上比較。
ウェブサイトのトラフィックや利用強度の可視化。
分析ダッシュボード用の相関マトリックス。
場所別・時間帯別の温度分布。
倉庫別・製品別の在庫状況。
日別・時間別のユーザーアクティビティ分析。
複数のデバイスからのセンサー測定値。
カテゴリー別のリスクレベルの可視化。
SLA またはチケット数の分析。

Markdown 対応

ログインしてコメント

基本情報

作者: syncfusion
リポジトリ: syncfusion/aspnetcore-ui-components-skills
カテゴリ: デザイン・UI
インストール数: 52
GitHub スター: 0

問題を報告