如何轻松在LightningChart中制作2D热力地图指南
使用LightningChart,您可以为各种用例创建不同类型的图表。先前的教程演示了如何创建具有多个线系列和轴,面积系列和条形系列的简单2D图表。在本教程中,我们将展示如何使用IntensityGridSeries创建简单的2D热图。
热图是一个矩阵,其中包含以颜色表示的各个值。在数据可视化中,可以使用热图通过着色的变化提供可视内容和有关数据值的反馈。对于本教程,我们建议您创建一个新的WinForms或WPF应用程序。LightningChart提供了两种创建热图的方法IntensityGridSeries和IntensityMeshSeries。IntensityGrid是在X和Y空间中均匀分布的矩形序列,可以可视化M x N个节点数组。IntensityMesh类似于IntensityGrid,但在IntensityMesh,系列不必为矩形,而系列节点可以在X和Y空间中任意放置。在本教程中,我们使用IntensityGridSeries。
1.创建一个热图实例作为IntensityGridSeries。
// Create a Heat Map as IntensityGridSeries. var heatMap = new IntensityGridSeries(_chart.ViewXY, axisX, axisY);
为了以所需的颜色显示数据值,我们需要创建一个ValueRangePalette。ValueRangePalette用于基于值定义数据着色的颜色。
2.为IntensityGridSeries创建ValueRangePalette。
// Creating palette for IntensityGridSeries. var palette = new ValueRangePalette(series);
LightningChart具有ValueRangePalette的预设值。为了以所需的方式为数据着色,我们首先需要清除ValueRangePalette及其调色板步骤。
3.从ValueRangePalette中清除预设值。
// LightningChart has some preset values for palette steps. // Clear the preset values from palette before setting new ones. foreach (var step in palette.Steps) { step.Dispose(); } palette.Steps.Clear();
然后,我们需要为调色板和PaletteType一起设置颜色。您可以使用System.Windows.Media.Color或System.Drawing.Color定义颜色,具体取决于您使用的是WPF还是WinForms。PaletteType定义调色板颜色在您的应用程序中的外观。
对于此示例,我们将PaletteType设置为Gradient。
4.定义用于为数据着色的调色板步骤。
// Add steps into palette. // Palette is used for presenting data in Heat Map with different colors based on their value. 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系列的数据点。在此示例中,我们将IntensityGrid的值填充为IntensityPoints,并用ValueRangePalette着色。
5.生成热图数据。
// Generate data. public void GenerateData(int columns, int rows) { // Create new IntensityPoint series for data. var data = new IntensityPoint[_columns, _rows]; // Disable rendering before updating chart properties to improve performance // and to prevent unnecessary chart redrawing while changing multiple properties. _chart.BeginUpdate(); // Set data values and add them to Heat Map. for (int i = 0; i < _columns; i++) { for (int j = 0; j < _rows; j++) { // Add values to the IntensityPoint series, points are generated by using following function. data[i, j].Value = 30.0 + 20 * Math.Cos(20 + 0.0001 * (double)(i * j)) + 70.0 * Math.Cos((double)(j - i) * 0.01); } } // Add generated data as Heat Map data. _heatMap.Data = data; // Call EndUpdate to enable rendering again. _chart.EndUpdate();