ここまでのチュートリアルで、LightningChart の使用により、あらゆる種類の異なるチャートを作成できることが分かりました。今回は、シンプルな 2D (XY) ヒートマップの作成方法を紹介します。
ヒートマップは、色として表示される個々の値が含まれた行列です。データ視覚化の分野において、ヒートマップは、視覚的コンテンツと異なる色の表示によるデータ値のフィードバックを提供します。子のチュートリアルでは、新規の WPF または Windows Form アプリケーションの作成を推奨します。
LightningChart .NET では、IntensityGridSeries および IntensityMeshSeries の 2 通りの方法でヒートマップを作成できます。IntensityGrid は、X および Y 空間に等間隔に配置された長方形の系列で、ノードの M×N 配列を視覚化します。IntensityMesh は、IntensityGrid と似ていますが、ここでは系列が長方形である必要はなく、X および Y 空間にノードを任意に配置できます。本チュートリアルでは、IntensityGridSeries を使用します。
- 異なる色によって個々の値を視覚化するためのソース コードは、下記のボタンからダウンロードできます。
作成手順
ヒートマップのインスタンスを IntensityGridSeries として作成します。
// IntensityGridSeries としてヒートマップを作成 var heatMap = new IntensityGridSeries(view, axisX, axisY);データを特定の色で表示する場合、
ValueRangePaletteを作成する必要があります。ValueRangePaletteは、値に基づいたデータの色付けに使用される色を定義します。IntensityGridSeries 向けに ValueRangePalette を作成します。
// IntensityGridSeries 向けにパレットを作成 var palette = new ValueRangePalette(series);LightningChart .NET には、
ValueRangePaletteのプリセット値があります。任意の色でデータの色付けを行う場合、ValueRangePaletteとパレットのステップを消去する必要があります。ValueRangePalette からプリセット値を消去します。
// LightningChart にはパレットのステップ向けにいくつかのプリセット値が存在 // 新規追加の前にパレットからプリセット値を消去 foreach (var step in palette.Steps) { step.Dispose(); } palette.Steps.Clear();その後、
PaletteTypeを使用して、パレット上で使用する色を設定する必要があります。使用アプリケーションの種類に合わせてSystem.Windows.Media.ColorまたはSystem.Drawing.Colorを使用することで色を定義できます。PaletteTypeは、アプリケーション内でパレットの色がどのように見えるかを定義します。
データの色付けに使用されるパレットのステップを定義します。
// パレットにステップを追加 palette.Steps.Add(new PaletteStep(palette, Color.FromRgb(0, 0, 255), -25)); palette.Steps.Add(new PaletteStep(palette, Color.FromRgb(20, 150, 255), 0)); palette.Steps.Add(new PaletteStep(palette, Color.FromRgb(0, 255, 0), 25)); palette.Steps.Add(new PaletteStep(palette, Color.FromRgb(255, 255, 20), 50)); palette.Steps.Add(new PaletteStep(palette, Color.FromRgb(255, 150, 20), 75)); palette.Steps.Add(new PaletteStep(palette, Color.FromRgb(255, 0, 0), 100)); palette.Type = PaletteType.Gradient; palette.MinValue = -50;
IntensityPointsを使用して、ヒートマップにデータを追加できます。IntensityPointsは、Intensity 系列のデータポイントです。この例では、ValueRangePaletteで色付けされたIntensityPointsとして、IntensityGridに値を設定します。チャートにデータを設定します。
// チャートのコンテンツを更新 public void UpdateHeatmap(int columns, int rows) { // データ用に新規の IntensityPoint 系列を作成 var data = new IntensityPoint[_columns, _rows]; // チャートの更新前にレンダリングを無効化 _chart.BeginUpdate(); // データ値を設定してヒートマップに追加 for (int i = 0; i < _columns; i++) { for (int j = 0; j < _rows; j++) { // IntensityPoint 系列に値を追加 // 下記の関数を使用してポイントを生成 data[i, j].Value = 30.0 + 20 * Math.Cos(20 + 0.0001 * (double)(i * j)) + 70.0 * Math.Cos((double)(j - i) * 0.01); } } // 生成されたデータをヒートマップのデータとして追加 _heatMap.Data = data; // データの更新完了をチャートに通知 _heatMap.InvalidateValuesDataOnly(); // レンダリングを再開 _chart.EndUpdate(); }- アプリケーションをビルドおよび実行します。
