WPF 2D 热图简介

在今天的教程中我们将使用 LightningChart .NET 交互式示例工具创建 2D 热图。 如您所知，热图是数据的图形表示形式，其中使用颜色来表示不同的值。 该技术通常用于根据所用颜色的强度来突出显示研究中的显着变化或值。

通常，最高值与强烈颜色（例如红色）相关，而最低值与不太强烈的颜色（蓝色、绿色、灰色等）相关。 在本文中，我们将创建 2D 热图，尽管在 3D 建模中也常见热图。

我们通常会看到两种类型的二维热图：

• 空间 2D 热图，表示全局地图中某些变化的强度或幅度。 最常见的例子是世界地图上温度变化的表示（平面视图）。

• 网格 2D 热图是一个二维地图，表示每个维度的类别。

可以将这两个类别组合起来以显示每个类别的大小差异。 热图通常用于温度图，但它们在商业和计算中也非常有用。

例如，通过 2D 热图，您可以可视化用户在网站上的操作，从而使您能够通过颜色的强度快速识别他们的行为。

在商业应用中，可以根据一段时间内收集的数据来分析某些行为的风险。 高风险值可以用红色表示，低风险值可以用绿色表示。 

最后，在工程和机械领域，一台设备的状况可以根据温度等值来确定，这些值可以用强烈的颜色表示高于平均值的值。

从外观上看，与其他图表相比，二维热图可能不太有吸引力，因为它可能会令人困惑，但它的重要性非常高，因为它可以根据颜色的强度来展示研究对象的风险。

项目概况

此 WPF 2D 热图将使用 IntensityGridSeries 创建。 您还可以通过 LightningChart .NET 交互式示例应用程序访问此图表。

下载项目以按照教程进行操作

本地设置

对于这个项目，我们需要考虑以下要求来编译项目。

操作系统：32 位或 64 位 Windows Vista 或更高版本、Windows Server 2008 R2 或更高版本。

DirectX：9.0c（Shader 模型 3 及更高版本）或 11.0 兼容图形适配器。

Visual Studio：2010-2019 用于开发，不需要部署。

平台 .NET Framework：已安装版本 4.0 或更高版本。

现在转到下一个 URL 并下载 LightningChart .NET。 然后，您将被重定向到登录表单，您必须在其中完成简单的注册过程。 完成注册过程后，您将可以访问您的 LightningChart 帐户。

登录帐户后，您将能够下载 SDK。 该 SDK 将是“免费试用”版本，但您将能够使用此数字信号处理滤波器应用程序教程的许多重要功能。 下载 SDK 后，您将拥有一个如下所示的 .exe 文件：

安装后因此请继续安装直至完成。 安装完成后，您将看到以下程序：

License Manager

在此应用程序中，您将看到购买选项。 您将使用此试用版 SDK 创建的所有项目都将可用于未来的开发并启用所有功能。

LightningChart .NET Interactive Examples

现在，您可以看到 100 多个可用于 WPF、WinForms 和/或 UWP 的交互式可视化

Visual Studio 项目

现在让我们使用 Visual Studio。 使用 LightningChart 可视化工具和 Visual Studio 之间的主要区别在于，我们将能够分析和试验源代码中的许多功能。 在 LC 可视化工具中，选择 2D 热图并运行示例：

在窗口的右上角区域，您将看到以下选项：

对于试用版 SDK，我们将能够使用 WPF 框架。 单击要使用的框架后，我们需要指定将在其中创建项目的文件夹：

最后，将创建 2D 热图项目，并打开 Visual Studio 并准备好执行数字信号处理滤波器应用程序。

代码综述

主要代码将包装在 MainWindow.xaml.cs 内。 在这里我们将找到 UI 控件的代码。

在代码中，我们将检查两个方法，它们将创建正确绘制 2D 热图所需的属性。 该交互式示例是使用各种用户控件构建的，用于操作和更改图表的视觉属性。 生成此图不需要这些控件，因此我们将重点关注负责生成对象的代码。

创建图表

此主要方法将创建 2D 热图图表对象：

_chart = new LightningChart();

我们需要在更新图表属性时禁用控件重绘。 BeginUpdate() 将帮助我们重新绘制控件

_chart.BeginUpdate();

LightningChart 2D 热图有以下主要视图：ViewXY、View3D、ViewPie3D、ViewPolar、ViewSmith。 可以通过设置 ActiveView 属性来更改可见视图。 默认视图是 ViewXY

_chart.ActiveView = ActiveView.ViewXY;

            _chart.ChartName = "Heat map chart";

我们可以访问 X 轴和 Y 轴，并将这些对象分配给 AxisX/AxisY 对象

// Configure x-axis.

            _chart.ViewXY.XAxes[0].ValueType = AxisValueType.Number;

            _chart.ViewXY.XAxes[0].ScrollMode = XAxisScrollMode.None;

            _chart.ViewXY.XAxes[0].SetRange(0, 100);

            // Configure y-axis.

            _chart.ViewXY.YAxes[0].SetRange(0, 100);

ValueType 有以下可用选项：

• Numer：整数和小数表示的常规数字格式。 禁用 AutoFormatLabels 时，将应用 LabelsNumberFormat。 默认值。

• Time：一天中演示的时间。 当禁用 AutoFormatLabel 时，将应用 LabelsTimeFormat。

• DateTIme：日期显示，可选择一天中的时间。 禁用 AutoFormatLabels 时，LabelsTimeFormat 也适用于此处，与 Time 类型类似。

• SetRange：通过为“最小值”和“最大值”属性指定值来设置轴的值范围。 最小值应小于最大值。 当尝试设置最小值>最大值时，反之亦然，内部限制器将限制接近其他值的值。 要同时设置这两个值，请使用 SetRange(...) 方法。 在 SetRange 中传递最小值 > 最大值会自动翻转这些值，以便最小值 < 最大值。

配置图例框

图例框可以自动或手动放置。 自动放置允许它们与 2D 热图片段的左/上/右/下侧或边缘对齐。 使用 Position 属性控制位置。

//Configure legend

            _chart.ViewXY.LegendBoxes[0].Layout = LegendBoxLayout.Vertical;

            _chart.ViewXY.LegendBoxes[0].Offset = new PointIntXY(-15, -70);

            // Configure legend box.

            _chart.ViewXY.LegendBoxes[0].Layout = LegendBoxLayout.Vertical;

位置选项有：上中、左上、右上、左中、右中、左下、中下、右下、手动。

为数据准备 IntensityGridSeries

IntensityGridSeries 允许可视化 M x N 节点数组，由指定的值范围调色板着色。 节点之间的颜色是插值的。

IntensityGridSeries 是 X 和 Y 维度上均匀分布的矩形系列。 该系列还允许渲染轮廓线、轮廓线标签和线框。

_intensityGrid = new IntensityGridSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0])

            {

                ContourLineType = ContourLineTypeXY.None,

                Optimization = IntensitySeriesOptimization.DynamicData,

                LegendBoxUnits = "°C",

                LegendBoxValuesFormat = "0"

            };

            _intensityGrid.Title.Text = "Heat map";

            _intensityGrid.AllowUserInteraction = false;

            _chart.ViewXY.IntensityGridSeries.Add(_intensityGrid);

从位图文件创建强度网格数据

可使用 SetHeightDataFromBitmap 方法来实现此目的。

系列数据数组属性获取位图大小的大小（如果未使用抗锯齿或重采样）。 对于每个位图图像像素，将红色、绿色和蓝色值相加。 总和越大，该节点的数据值就越大。 黑色和深色的值较低，亮色和白色的值较高。

主图像将位于资源文件夹中

private void SetExampleData()

        {

            // Load example data from resource stream.

            string strResourceImage = "Ground400x240.jpg";

            string baseDirectory = Environment.CurrentDirectory;

            System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(baseDirectory + @"\Resources\" + strResourceImage);

            CreateIntensitySeriesData(bitmap);

        }

Fill Styles

private void ApplyFillStyle()

        {

            if (_constructing == true)

            {

                return;

            }

            // Disable rendering, strongly recommended before updating chart properties.

            _chart.BeginUpdate();

            if (radioButtonSourceDataColoring.IsChecked == true)

            {

                _intensityGrid.Fill = IntensityFillStyle.FromSurfacePoints;

            }

            else if (radioButtonValueColoringGradient.IsChecked == true)

            {

                _intensityGrid.Fill = IntensityFillStyle.Paletted;

                _intensityGrid.ValueRangePalette.Type = PaletteType.Gradient;

            }

            else if (radioButtonValueColoringSolid.IsChecked == true)

            {

                _intensityGrid.Fill = IntensityFillStyle.Paletted;

                _intensityGrid.ValueRangePalette.Type = PaletteType.Uniform;

            }

            else if (radioButtonSingleColor.IsChecked == true)

            {

                _intensityGrid.Fill = IntensityFillStyle.Toned;

            }

使用 Fill 属性选择填充样式。 可以使用以下选项：

• None：使用此选项时，不会应用任何填充。 此选择对于线框网格很有用。

• FromSurfacePoints：使用数据属性节点的颜色。

• Toned：适用 ToneColor。

• PalettedByY：通过调色板按 Y 值着色。

• PalettedByValue：通过调色板按 SurfacePoint 的值字段着色。

• Bitmap：位图图像被拉伸以覆盖整个 2D 热图表面。 在 BitmapFill 属性中设置位图图像。 BitmapFill 属性具有用于垂直和水平镜像图像的子属性。

启用 FullInterpolation 属性以在填充中使用增强的插值方法。 请注意，这会导致更多的 CPU 和 GPU 使用。 通过使用全插值，填充质量更好，但只有在数据数组大小相当小时才能看到。

Contour Lines

Contour lines：轮廓线可与填充和线框属性一起使用。 通过设置 ContourLineType 属性，可以绘制不同样式的等高线：

• None：不显示等高线。

• FastColorZones：线条在调色板步骤末端绘制为细区域。 允许非常强大的渲染，非常适合持续更新或动画的表面。 陡峭的值变化显示为细线，而平缓倾斜的高度差则显示为粗区域。 每条线都使用由 ContourLineStyle.Color 属性定义的相同颜色。 区域宽度可以通过 FastContourZoneRange 属性设置。 该值在 Y 轴范围内。

• FastPalettedZones：与 FastColorZones 类似，但线条着色遵循 ValueRangePalette 选项

• ColorLine：与 FastColorZones 类似，但轮廓线是实际的线。 渲染需要更长的时间，不建议用于持续更新或动画的 2D 热图表面。 线宽可以使用 ContourLineStyle.Width 属性进行调整。

• PalettedLine：与 ColorLine 类似，但线条着色遵循 ValueRangePalette 选项。

private void ApplyContourLinesStyle()

        {

            if (_constructing == true)

            {

                return;

            }

            // Disable rendering, strongly recommended before updating chart properties.

            _chart.BeginUpdate();

            if (radioButtonContourNone.IsChecked == true)

            {

                _intensityGrid.ContourLineType = ContourLineTypeXY.None;

            }

            else if (radioButtonContourFastZones.IsChecked == true)

            {

                _intensityGrid.ContourLineType = ContourLineTypeXY.FastColorZones;

            }

            else if (radioButtonContourFastPalettedZones.IsChecked == true)

            {

                _intensityGrid.ContourLineType = ContourLineTypeXY.FastPalettedZones;

            }

            else if (radioButtonContourLines.IsChecked == true)

            {

                _intensityGrid.ContourLineType = ContourLineTypeXY.ColorLine;

            }

            else if (radioButtonContourPalettedLines.IsChecked == true)

            {

                _intensityGrid.ContourLineType = ContourLineTypeXY.PalettedLine;

            }

完成后的WPF 2D热图 APP

视频地址：https://www.dhorde.com/resources/detail/833.html

该项目的逻辑基于网格型二维热图。 如果我们选择允许我们观察线框的选项，我们将看到每个生成的节点。

最高的值将具有红色，最低的值将具有紫色。 对于此示例，强度范围内的值与图像中每个像素的颜色强度成比例。 如果您上传黑色背景的图像，它将在热图中显示紫色，因为它是强度范围内最暗的颜色。

例如，我们可以通过观察强烈的肤色来识别人脸温度最高的区域。 在下图中，我们可以注意到面部最热的区域在40-50摄氏度之间（这对于人类来说相当高，但可以说这是出于演示目的可以接受的范围），而最冷的区域 均在30摄氏度之间。

LC .NET 库允许我们识别颜色并生成我们自己的调整来制作渐变层，这有助于我们识别许多研究案例的强度，例如温度、振动等。 交互式示例工具允许您根据自己的喜好配置每个图表并生成供您自己使用的代码。