シンプルな 2D (XY) ヒートマップ チャート

異なる色による個々の値の視覚化

製品情報チャート一覧

ここまでのチュートリアルで、LightningChart の使用により、あらゆる種類の異なるチャートを作成できることが分かりました。今回は、シンプルな 2D (XY) ヒートマップの作成方法を紹介します。

ヒートマップは、色として表示される個々の値が含まれた行列です。データ視覚化の分野において、ヒートマップは、視覚的コンテンツと異なる色の表示によるデータ値のフィードバックを提供します。子のチュートリアルでは、新規の WPF または Windows Form アプリケーションの作成を推奨します。

LightningChart .NET では、IntensityGridSeries および IntensityMeshSeries の 2 通りの方法でヒートマップを作成できます。IntensityGrid は、X および Y 空間に等間隔に配置された長方形の系列で、ノードの M×N 配列を視覚化します。IntensityMesh は、IntensityGrid と似ていますが、ここでは系列が長方形である必要はなく、X および Y 空間にノードを任意に配置できます。本チュートリアルでは、IntensityGridSeries を使用します。


作成手順

  1. ヒートマップのインスタンスを IntensityGridSeries として作成します。

                // IntensityGridSeries としてヒートマップを作成
                var heatMap = new IntensityGridSeries(view, axisX, axisY);
            

    データを特定の色で表示する場合、ValueRangePalette を作成する必要があります。ValueRangePalette は、値に基づいたデータの色付けに使用される色を定義します。

  2. IntensityGridSeries 向けに ValueRangePalette を作成します。

                // IntensityGridSeries 向けにパレットを作成
                var palette = new ValueRangePalette(series);
            

    LightningChart .NET には、ValueRangePalette のプリセット値があります。任意の色でデータの色付けを行う場合、ValueRangePalette とパレットのステップを消去する必要があります。

  3. ValueRangePalette からプリセット値を消去します。

                // LightningChart にはパレットのステップ向けにいくつかのプリセット値が存在
                // 新規追加の前にパレットからプリセット値を消去
                foreach (var step in palette.Steps)
                {
                    step.Dispose();
                }
                palette.Steps.Clear();
            

    その後、PaletteType を使用して、パレット上で使用する色を設定する必要があります。使用アプリケーションの種類に合わせて System.Windows.Media.Color または System.Drawing.Color を使用することで色を定義できます。PaletteType は、アプリケーション内でパレットの色がどのように見えるかを定義します。

  4. データの色付けに使用されるパレットのステップを定義します。

                // パレットにステップを追加
                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 に値を設定します。

  5. チャートにデータを設定します。

                // チャートのコンテンツを更新
                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();
                }
            
  6. アプリケーションをビルドおよび実行します。


ライセンス体系、価格、お見積り依頼、ご購入前の技術的なお問い合わせなど、本製品に関するご質問、ご不明な点はエクセルソフトまでお気軽にお問い合わせください。

お問い合わせ


ページトップへ