syncfusion-wpf-heatmap

SfHeatMap の実装（WPF）

目次

• このスキルを使用する場面
• コントロールの概要 → references/overview.md
• クイックスタート → references/getting-started.md
• カラーマッピング → references/color-mapping.md
• 項目のマッピング → references/items-mapping.md
• 凡例と視覚化 → references/legend.md
• よくあるパターン
• トラブルシューティング

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

WPF アプリで Syncfusion の SfHeatMap コントロールを統合して構成するための、実践的ですぐにコピーして使えるガイドが必要な場合に、このスキルを使用します。API リファレンスを網羅するのではなく、実装（何を、なぜ構成するか）に重点を置いています。

コントロールの概要

参照先：references/overview.md

主なポイント：

• 表形式のデータを色のグラデーションで視覚化します
• TableMapping および CellMapping データモデルをサポートします
• パターンや値の範囲をすばやく見つけるのに役立ちます

クイックスタート

参照先：references/getting-started.md

まず行うこと：

• SfHeatMap を XAML に追加します
• ItemsSource と ItemsMapping（TableMapping または CellMapping）を指定します
• 値から色へのマッピングに ColorMappingCollection を追加します
• 任意で SfHeatMapLegend を追加し、範囲を分かりやすくします

カラーマッピングのガイド

参照先：references/color-mapping.md

カラーマッピングを調整する場面：

• 意味に基づく区分（悪い／平均／良い）が必要な場合
• 解釈のために、範囲と色を正確に対応付ける必要がある場合

意味に基づく区分（赤／黄／緑）— 例

明示的な数値範囲を意味に基づく色にマッピングし、凡例を表示する、コピーして使える XAML + C#：

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="HeatMapSamples.MainWindow">
  <Window.Resources>
    
    <syncfusion:ColorMappingCollection x:Key="semanticColorMapping">
      
      <syncfusion:ColorMapping Value="0"   Color="#FF0000" Label="Low (0 - 33)" />
      <syncfusion:ColorMapping Value="33"  Color="#FFFF00" Label="Medium (34 - 66)" />
      <syncfusion:ColorMapping Value="66"  Color="#00B300" Label="High (67 - 100)" />
    </syncfusion:ColorMappingCollection>

    
    <syncfusion:CellMapping x:Key="cellMapping">
      <syncfusion:CellMapping.Column>
        <syncfusion:ColumnMapping PropertyName="Column" DisplayName="Column" />
      </syncfusion:CellMapping.Column>
      <syncfusion:CellMapping.Row>
        <syncfusion:ColumnMapping PropertyName="Row" DisplayName="Row" />
      </syncfusion:CellMapping.Row>
      <syncfusion:CellMapping.Value>
        <syncfusion:ColumnMapping PropertyName="Value" />
      </syncfusion:CellMapping.Value>
    </syncfusion:CellMapping>
  </Window.Resources>

  <Grid Margin="12">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    
    <syncfusion:SfHeatMapLegend
        Grid.Row="0"
        LegendMode="List"
        Orientation="Horizontal"
        ColorMappingCollection="{StaticResource semanticColorMapping}" />

    
    <syncfusion:SfHeatMap
        Grid.Row="1"
        ItemsSource="{Binding Cells}"
        ItemsMapping="{StaticResource cellMapping}"
        ColorMappingCollection="{StaticResource semanticColorMapping}" />
  </Grid>
</Window>

// Minimal code-behind (MainWindow.xaml.cs)
using System.Collections.ObjectModel;
using System.Windows;

public class CellData
{
    public string Row { get; set; }
    public string Column { get; set; }
    public double Value { get; set; }
}

public partial class MainWindow : Window
{
    public ObservableCollection<CellData> Cells { get; } = new ObservableCollection<CellData>();

    public MainWindow()
    {
        InitializeComponent();
        // sample values spanning 0..100
        Cells.Add(new CellData { Row = "R1", Column = "C1", Value = 10 });
        Cells.Add(new CellData { Row = "R1", Column = "C2", Value = 40 });
        Cells.Add(new CellData { Row = "R1", Column = "C3", Value = 80 });
        Cells.Add(new CellData { Row = "R2", Column = "C1", Value = 25 });
        Cells.Add(new CellData { Row = "R2", Column = "C2", Value = 55 });
        Cells.Add(new CellData { Row = "R2", Column = "C3", Value = 95 });

        DataContext = this;
    }
}

注意：

• ColorMappingCollection は色の区切りを定義します。区切りの間の値は補間されますが、意図的に区分として扱うこともできます。ここに示す区切りと SfHeatMapLegend LegendMode="List" を使用すると、凡例にラベル付きの範囲が表示されます。
• データの分布に合わせて Value のしきい値（例では 0／33／66）を調整します。定義する Value の範囲が、データの範囲全体をカバーしていることを確認してください。

項目マッピングのガイド

参照先：references/items-mapping.md

TableMapping と CellMapping の使い分け：

• 数値プロパティを複数持つ幅広いオブジェクト（列が年）には TableMapping を使用します
• 行／列／値の 3 要素で構成されたデータセットには CellMapping を使用します

凡例と視覚化

参照先：references/legend.md

色の範囲を把握しやすくするには、凡例を使用します。連続的な範囲には Gradient を、ラベル付きの区分には List を選択します。

よくあるパターン

• クイックスタートの例：最小限の XAML + 項目マッピング + カラーマッピング + 凡例
• レスポンシブレイアウト：凡例の幅を制限し、Orientation を使って調整します
• アクセシビリティ：スクリーンリーダーにとって十分なラベルとコントラストを確保します

トラブルシューティング

• 色が想定と異なる場合は、ColorMappingCollection の値を確認し、数値範囲がデータと一致していることを確かめます
• 項目が表示されない場合は、ItemsMapping が ItemsSource のスキーマおよびキーと一致していることを確認します

---

SfHeatMap コントロールの実装方法を簡潔に案内するため、自動生成されました。