当前位置：首页 > news >正文

「实战应用」如何用图表控件LightningChart可视化天气数据？（二）

news 2025/9/15 7:04:35

LightningChart.NET完全由GPU加速，并且性能经过优化，可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D，高级3D，Polar，Smith，3D饼/甜甜圈，地理地图和GIS图表以及适用于科学，工程，医学，航空，贸易，能源和其他领域的体绘制功能。

立即申请LightningChart .NET试用

在上文中（点击这里回顾>>），我们为大家介绍了天气数据可视化的概念以及一些项目概述、前期准备等，本文将继续介绍具体的代码部分，请持续关注哦！

代码审查

主代码将被封装在MainWindow.xaml.cs中，在这里我们将找到UI控件的代码。

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

MakeSourceData()

我们将从InitializeComponent方法开始，这将允许加载XAML模板并访问其中的对象。

InitializeComponent();
MakeSourceData();

一旦加载了XAML组件，我们就可以开始编程这个天气数据可视化应用实例了。为了处理图像、操纵它们并将它们加载到图表中，需要将他们转换为位图。在项目资源文件夹中，您可以找到一个图像，它将帮助我们创建雨“clouds”，该图像将被转换成位图，我们将使用工具GetPixelColors提取图像的颜色。

System.Drawing.Bitmap bitmapDataSource = new System.Drawing.Bitmap(Environment.CurrentDirectory + @"\Resources\EnvironmentalData200x150.png");
//Use fast method for getting pixel colors
System.Drawing.Color[,] aPixelColors = ChartTools.GetPixelColors(bitmapDataSource);
int width = aPixelColors.GetLength(0);
int iHeight = aPixelColors.GetLength(1);
//The data array has value range of 0...1
m_aEnvironmentalData = new double[width][];
for (int column = 0; column < width; column++)
{
m_aEnvironmentalData[column] = new double[iHeight];
for (int row = 0; row < iHeight; row++)
{
m_aEnvironmentalData[column][row] = (aPixelColors[column, row].R + aPixelColors[column, row].G
+ aPixelColors[column, row].B) / (3.0 * 255.0);
}
}

这个工具允许我们一次获得所有像素的颜色，替换对图像的每个像素进行操作。最后，我们将按列和行获取图像的所有值，这些值将存储在变量m_aEnvironmentalData中。

CreateChart()

CreateChart方法将构造图表对象，该对象将显示在XAML框架中，我们需要创建一个LightningChart类型对象。这个构造函数将允许我们创建图表的实例，指定图表的类型，并访问不同的属性。

_chart = new LightningChart
{
ChartName = "Stencil map chart"
};

_BeginUpdate

BeginUpdate函数将允许我们停止绘制图表，这将允许设置想要的自定义属性。只要更新没有关闭，图表就不会显示所做的更改，这将有助于图表构建的性能。

_chart.BeginUpdate();

图表类型

我们需要指定激活图标视图或将要创建的图表类型，在本例中我们使用XY视图，有几种类型的视图：

XY
3D
3D饼图
雷达图
Smith

_chart.ActiveView = ActiveView.ViewXY;

现在我们将通过markdown文档(MD)文件加载地图，您可以在项目的Maps文件夹中找到该文件，提取的对象将被分配给XY图表的Maps属性。

string path = Environment.CurrentDirectory + @"\Maps\" + DefaultMap + ".md";
if (path != "")
{
_chart.ViewXY.Maps.Path = System.IO.Path.GetDirectoryName(path);
}

地理矢量数据存储在LightningChart地图文件中，扩展名为.md。LightningChart提供了一组地图文件，X轴用于经度，Y轴用于纬度，纬度原点为赤道，经度原点为Greenwich, U.K。

Map属性

我们将从设置地图的属性开始，在X轴和Y轴范围保持不变的典型情况下，将 ViewXY.Maps.Optimization设置为CombinedLayers，并且在地图上显示其他数据。这允许将地图层渲染到相同的缓冲图像中，从而提高渲染效率。

CalcGradient工具将计算两种颜色之间的渐变颜色，第一个参数是初始颜色，第二个是最终颜色，第三个值是以百分比表示的渐变颜色位置。

_chart.ViewXY.Maps.Type = DefaultMap;
_chart.ViewXY.Maps.AllowUserInteraction = false;
_chart.ViewXY.Maps.Optimization = Map.RenderingOptimization.CombinedLayers;
_chart.ViewXY.Maps.LandOptions.Fill.Color = Colors.DarkBlue;
_chart.ViewXY.Maps.LandOptions.Fill.GradientColor = Colors.Black;
_chart.ViewXY.Maps.LandOptions.Fill.GradientFill = GradientFill.RadialStretched;
_chart.ViewXY.Maps.LandOptions.LineStyle.Color = Colors.Silver;
_chart.ViewXY.Maps.LakeOptions.Fill.Color = Colors.DeepSkyBlue;
_chart.ViewXY.Maps.LakeOptions.Fill.GradientColor = ChartTools.CalcGradient(Colors.DeepSkyBlue, Colors.Black, 80);

应用程序背景颜色

背景填充支持：

纯色填充，设置GradientFill = Solid，并使用Color来定义颜色。
渐变填充，从Color到GradientColor。设置GradientFill = Linear / Radial / RadialStretched / Cylindrical，使用GradientDirection来控制线性和圆柱渐变的填充方向。
位图填充，具有不同的平铺和拉伸选项。位图色彩和alpha也支持半透明的位图填充。

_chart.ViewXY.GraphBackground.Color = Color.FromArgb(255, 0, 0, 64);
_chart.ViewXY.GraphBackground.GradientColor = Colors.Black;
_chart.ViewXY.GraphBackground.GradientFill = GradientFill.Linear;

自动轴布局

自动轴布局可以被禁用，XAxisAutoPlacement控制如何垂直放置X轴，YAxisAutoPlacement控制Y轴的水平放置方式。

_chart.ViewXY.AxisLayout.AutoAdjustMargins = false;
_chart.ViewXY.AxisLayout.XAxisAutoPlacement = XAxisAutoPlacement.Off;
_chart.ViewXY.AxisLayout.YAxisAutoPlacement = YAxisAutoPlacement.Off;
_chart.ViewXY.AxisLayout.XAxisTitleAutoPlacement = false;
_chart.ViewXY.AxisLayout.YAxisTitleAutoPlacement = false;

删除页边距

可以从天气数据可视化应用程序中删除边距，代码如下：

_chart.ViewXY.Margins = new Thickness(0, 0, 0, 0);

IntensityGridSeries()

环境系列

现在我们将开始创建图例框，它将显示每毫米雨的强度颜色，我们需要配置一个强度网格系列来渲染地理地图上的环境数据。

IntensityGridSeries environmentalSeries = new IntensityGridSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
environmentalSeries.Title.Text = "Rain";
environmentalSeries.FullInterpolation = checkBoxFullInterpolation.IsChecked.Value;
environmentalSeries.Optimization = IntensitySeriesOptimization.DynamicValuesData;
environmentalSeries.AllowUserInteraction = false; //Disable mouse interaction to make DynamicValuesData optimization effective.
environmentalSeries.LegendBoxUnits = "mm/h";
environmentalSeries.LegendBoxValuesFormat = "0.0";
environmentalSeries.SetRangesXY(-125, -65, 24, 49);
environmentalSeries.Data = new IntensityPoint[m_aEnvironmentalData.GetLength(0), m_aEnvironmentalData[0].GetLength(0)];

IntensityGridSeries类需要三个参数才能工作：

需要它的所有者或父对象
X轴
Y轴

在这些属性中，我们可以发现一些对流程优化的关注。

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

并调用InvalidateValuesDataOnly方法来更新图表，通过这种方式，更新速度要快得多，因为不需要重新计算序列的几何形状。这仅用于节点的数据X和Y值保持在同一位置的应用程序，例如在热成像解决方案中。

SetRanges：同时设置X和Y范围，与单独设置RangeMinX、RangeMaxX、RangeMinY和RangeMaxY属性相比，这是一种非常高效的CPU方式。

添加数据

要添加数据，我们需要设置之前映射到data属性的值，在图表中加入环境系列：

_chart.ViewXY.IntensityGridSeries.Add(environmentalSeries);

在环境数据中添加模板区域

IntensityGridSeries, IntensityMeshSeries和Maps都有StencilArea特性，它允许在绘制的数据区域内或外屏蔽。

配置X轴

_chart.ViewXY.XAxes[0].ScrollMode = XAxisScrollMode.None;
_chart.ViewXY.XAxes[0].SetRange(-130, -65);
_chart.ViewXY.XAxes[0].ValueType = AxisValueType.MapCoordsDegMinSecNESW;
Color color = Colors.Turquoise;
_chart.ViewXY.XAxes[0].MajorGrid.Color = Color.FromArgb(40, color.R, color.G, color.B);
_chart.ViewXY.XAxes[0].LabelsColor = Colors.White;
_chart.ViewXY.XAxes[0].MajorDivTickStyle.Alignment = Alignment.Near;
_chart.ViewXY.XAxes[0].LabelsPosition = Alignment.Near;
_chart.ViewXY.XAxes[0].MajorDivTickStyle.Color = Colors.White;
_chart.ViewXY.XAxes[0].VerticalAlign = AlignmentVertical.Top;

我们可以通过选择X或Y列表来访问和配置每个轴，在本例中，我们只使用一个X、Y和Z轴，因此我们选择索引0。

ScrollMode

在进行实时监控应用程序时，必须滚动X轴来正确显示当前监控位置，该位置通常是最新信号点的时间戳。

在将新信号点设置为一系列之后，将最新的时间戳设置为ScrollPosition属性。LightningChart有几种滚动模式，您可以使用ScrollMode属性访问它们。

None：设置ScrollPosition值时不应用滚动，当在其他应用程序中使用图表而不是实时监控时，这通常是要使用的选择。
Stepping：当收集到的数据到达X轴的末端时，包含所有系列数据的轴向左移动一个步进间隔。每次到达x轴末端时都会执行此移动，SteppingInterval属性定义为取值范围。
Scrolling：X轴保持静止，直到达到滚动间隙，之后所有系列的X轴连续向左移动。如果滚动应该在滚动位置到达X轴末端时生效，则将ScrollingGap设置为0，ScrollingGap属性定义为图形宽度的百分比。
Sweeping：扫描模式可能提供了最友好的实时监控视图，扫描使用两个X轴，第一个轴被收集满，之后出现一个扫过的间隙，然后第二个X轴扫过第一个X轴，两个X轴都显示它们的值标签，SweepingGap属性定义为图形宽度的百分比。
Triggering：X轴位置由超过或低于触发水平的一系列值确定，使用Triggering属性设置触发选项。可以通过启用Triggering.TriggeringActive 属性将出发设置为激活状态。
MajorGrid：水平网格线绘制在分割刻度的垂直位置上，大栅格表示大划分刻度，小栅格表示小划分刻度，使用MajorGrid和MinorGrid属性来编辑外观。
MajorDivTickStyle：主要划分间距可以通过使AutoDivSpacing启用来自动完成。根据标签字体大小和AutoDivSeparationPercent属性，尽可能方便用户地计算间距，增加该值以减少主要部门的数量。
Minor divisions：使用MinorDivCount属性值在大分区之间计算。
Major division tick style可以通过MajorDivTickStyle属性设置，使用MajorDivTickStyleAlignment属性编辑刻度和标签的方向，值标签被绘制在主要除法刻度旁边，分别使用MinorDivTickStyle属性编辑次要分割属性。

_chart.ViewXY.YAxes[0].SetRange(23, 53);
_chart.ViewXY.YAxes[0].ValueType = AxisValueType.MapCoordsDegNESW;
color = Colors.Turquoise;
_chart.ViewXY.YAxes[0].MajorGrid.Color = Color.FromArgb(40, color.R, color.G, color.B);
_chart.ViewXY.YAxes[0].LabelsColor = Colors.White;
_chart.ViewXY.YAxes[0].MajorDivTickStyle.Alignment = Alignment.Far;
_chart.ViewXY.YAxes[0].MajorDivTickStyle.Color = Colors.White;
_chart.ViewXY.YAxes[0].Alignment = AlignmentHorizontal.Right;

设置LegendBoxes

图例框可以自动或手动放置，自动放置允许它们对齐到图形段的左/上/右/底部，或在空白处。

用position属性控制位置，位置选项有：TopCenter, TopLeft, TopRight, LeftCenter, RightCenter, BottomLeft, BottomCenter, BottomRight, Manual。

Offset属性将位置从position属性确定的位置移动给定的量，手动定位计算从图例框左上角到视图左上角的偏移量。

_chart.ViewXY.LegendBoxes[0].Layout = LegendBoxLayout.Vertical;
_chart.ViewXY.LegendBoxes[0].Fill.Color = Colors.Transparent;
_chart.ViewXY.LegendBoxes[0].Fill.GradientFill = GradientFill.Solid;
_chart.ViewXY.LegendBoxes[0].UnitsColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].ValueLabelColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].SeriesTitleColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].Offset = new PointIntXY(0, -100);

最终图表

为了完成对天气预报分析和可视化图表的配置，我们使用EndUpdate方法，该方法将恢复绘图控件，用分配的属性更新图表。图表对象将被添加到XAML网格中，以便向用户显示。

_chart.EndUpdate();
_chart.Loaded += _chart_Loaded;
gridChart.Children.Add(_chart);
_chartInitialized = true;

LightningChart.NET使用教程图集

总结

我们完成了这个天气图形教程，感谢大家观看！在本教程中，我们为某国地区创建了一个高级的、高性能的、交互式的温度参数天气映射系统。

正如您所看到的，这个气象地图应用程序是完全可定制的，从开发人员的角度来看，每个属性和最终用户特性都可以根据需要进行定制。

LightningChart.NET提供了不同的地理地图，可以用来生成任何世界气象地图和任何其他需要的地图应用程序。