彩票走势图

图表控件LightningChart使用教程:创建2D 热点图图表

翻译|使用教程|编辑:董玉霞|2022-08-24 11:31:05.370|阅读 113 次

概述:使用LightningChart.NET,您可以为各种用例创建不同类型的图表。在本教程中,我们将展示如何使用 IntensityGridSeries 创建简单的 2D 热图。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

使用LightningChart.NET,您可以为各种用例创建不同类型的图表。以前的教程已经演示了如何创建具有多个线系列和轴、面积序列和条形系列的简单 2D 图表。在本教程中,我们将展示如何使用 IntensityGridSeries 创建简单的 2D 热图。

LightningChart® .NET| 下载试用

.net图表控件LightningCharts.NET

热图是一个矩阵,其中包含以颜色形式显示的各个值。在数据可视化中,热图可用于通过颜色的变化来提供有关数据值的视觉内容和反馈。对于本教程,我们建议您创建新的 WinForms 或 WPF 应用程序。LightningChart提供了两种创建热图的方法 - IntensityGridSeries和TensityMeshSeries。IntensityGrid是X和Y空间中均匀间隔的矩形系列,允许M x N节点数组的可视化。IntensityMesh类似于ProtensionyGrid,但在TensionyMesh中,系列不需要是矩形的,而系列节点可以在X和Y空间中任意定位。在本教程中,我们使用的是 IntensityGridSeries。

  1. 创建一个热图实例作为强度网格系列。
    // Create a Heat Map as IntensityGridSeries.
    var heatMap = new IntensityGridSeries(_chart.ViewXY, axisX, axisY);
  2. 为了以所需的颜色显示数据值,我们需要创建一个 ValueRangePalette。ValueRangePalette 用于根据值定义数据着色的颜色。

  3. 为 IntensityGridSeries 创建一个 ValueRangePalette。
    // Creating palette for IntensityGridSeries.
    var palette = new ValueRangePalette(series);
  4. 图表控件LightningChart具有ValueRangePalette的预设值。为了以所需的方式为数据着色,我们首先需要清除ValueRangePalette及其调色板步骤。 

  5. 清除 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();
  6. 然后,我们需要使用调色板类型为调色板设置颜色。您可以使用 System.Windows.Media.Color 或 System.Drawing.Color 定义颜色,具体取决于您使用的是 WPF 还是 WinForms。PaletteType 定义调色板着色在应用程序中的外观。

    .net图表控件LightningCharts.NET

    对于此示例,我们将“调色板类型”设置为“渐变”。

  7. 定义用于为数据着色的调色板步骤。
    // 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 填充 IntensityGrid,这些值用 ValueRangePalette 着色。

  8. 生成热图数据。
    // 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(); }

通过本文,您可以快速了解到如何建立2D 热点图图表,想要了解更多相关教程,欢迎进入慧都官网查看。

欢迎加入LightningChart技术交流群,获取最新产品咨询:740060302

想要了解或购买LightningChart 正版授权的朋友,欢迎咨询。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP