尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案

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

发布时间：2026/11/7 16:51:33来源：尧图网络资讯中心
首页/资讯中心/文章详情
「实战应用」如何用图表控件LightningChart可视化天气数据？（二）
LightningChart.NETLightningChart.NET完全由GPU加速并且性能经过优化可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D高级3DPolarSmith3D饼/甜甜圈地理地图和GIS图表以及适用于科学工程医学航空贸易能源和其他领域的体绘制功能。在上文中我们为大家介绍了天气数据可视化的概念以及一些项目概述、前期准备等本文将继续介绍具体的代码部分请持续关注哦代码审查主代码将被封装在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 };_BeginUpdateBeginUpdate函数将允许我们停止绘制图表这将允许设置想要的自定义属性。只要更新没有关闭图表就不会显示所做的更改这将有助于图表构建的性能。_chart.BeginUpdate();图表类型我们需要指定激活图标视图或将要创建的图表类型在本例中我们使用XY视图有几种类型的视图XY3D3D饼图雷达图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使用OptimizationDynamicValuesData只更新Data数组的Value字段。并调用InvalidateValuesDataOnly方法来更新图表通过这种方式更新速度要快得多因为不需要重新计算序列的几何形状。这仅用于节点的数据X和Y值保持在同一位置的应用程序例如在热成像解决方案中。SetRanges同时设置X和Y范围与单独设置RangeMinX、RangeMaxX、RangeMinY和RangeMaxY属性相比这是一种非常高效的CPU方式。添加数据要添加数据我们需要设置之前映射到data属性的值在图表中加入环境系列s_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属性定义为取值范围。ScrollingX轴保持静止直到达到滚动间隙之后所有系列的X轴连续向左移动。如果滚动应该在滚动位置到达X轴末端时生效则将ScrollingGap设置为0ScrollingGap属性定义为图形宽度的百分比。Sweeping扫描模式可能提供了最友好的实时监控视图扫描使用两个X轴第一个轴被收集满之后出现一个扫过的间隙然后第二个X轴扫过第一个X轴两个X轴都显示它们的值标签SweepingGap属性定义为图形宽度的百分比。TriggeringX轴位置由超过或低于触发水平的一系列值确定使用Triggering属性设置触发选项。可以通过启用Triggering.TriggeringActive 属性将出发设置为激活状态。MajorGrid水平网格线绘制在分割刻度的垂直位置上大栅格表示大划分刻度小栅格表示小划分刻度使用MajorGrid和MinorGrid属性来编辑外观。MajorDivTickStyle主要划分间距可以通过使AutoDivSpacing启用来自动完成。根据标签字体大小和AutoDivSeparationPercent属性尽可能方便用户地计算间距增加该值以减少主要部门的数量。Minor divisions使用MinorDivCount属性值在大分区之间计算。Major divisiontick 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提供了不同的地理地图可以用来生成任何世界气象地图和任何其他需要的地图应用程序。
RELATED

相关推荐

模型降级契约：备用模型不是随便切一下

模型降级契约：备用模型不是随便切一下

模型降级契约：备用模型不是随便切一下 一、模型降级不能只看接口是否兼容 企业后端接入大模型后，通常会准备备用模型。主模型超时、限流或成本过高时，切到备用模型。听起来简单，实际很容易出问题。备用模型的上下文长度、工具调…

📅 2026/9/27 18:46:00
免费获取每日个性化论文推荐的终极指南：Zotero-arXiv-Daily 完全教程

免费获取每日个性化论文推荐的终极指南：Zotero-arXiv-Daily 完全教程

免费获取每日个性化论文推荐的终极指南：Zotero-arXiv-Daily 完全教程 【免费下载链接】zotero-arxiv-daily Recommend new arxiv papers of your interest daily according to your Zotero libarary. 项目地址: https://gitcode.com/GitHub_Trending/zo/zotero-ar…

📅 2026/11/5 0:54:00
Mix 2.0性能优化指南：大型Flutter应用中的样式管理策略

Mix 2.0性能优化指南：大型Flutter应用中的样式管理策略

Mix 2.0性能优化指南：大型Flutter应用中的样式管理策略 【免费下载链接】mix A styling system for Flutter 项目地址: https://gitcode.com/gh_mirrors/mix4/mix 在当今复杂的Flutter应用开发中，样式管理往往成为性能瓶颈的隐形杀手。Mix 2.0作为…

📅 2026/9/8 22:33:08
MORE NEWS

更多资讯

📰

湘西电工证复查在哪考？怕考不过白交培训费？看完这篇全明白了

湘西电工证复查在哪考？怕考不过白交培训费？看完这篇全明白了 怕考不过白交培训费？别急，今天给你讲明白湘西电工证复查到底 在哪考 、怎么查、怎么考过，还有你最关心的薪资、发展路径，全都一网打尽。 湘西电工证复查是啥？怎么查？…
📰

临海电工证复审别踩坑！含金量怎么保障？三门峡老电工给你说清楚

临海电工证复审别踩坑！含金量怎么保障？三门峡老电工给你说清楚 你是不是也在为临海电工证复审发愁？不知道去哪报名，怕被中介坑？别急，老电工来帮你理清思路，从 含金量 到流程避坑，一文讲透！…
📰

初级电工证多少分拿证千万别踩坑 这些避坑干货工地电工都该看

初级电工证多少分拿证千万别踩坑 这些避坑干货工地电工都该看 工地太忙根本没时间复习考试，这几乎是所有一线电工的真实写照。初级电工证考试，不是你考不考得过的问题，而是你能不能在有限时间里 高效拿证…
📰

江苏省代办电工证在哪考?外省证怎么转过来?

江苏省代办电工证在哪考?外省证怎么转过来? 之前考的证在外省能不能转过来？这几乎是每个想考江苏省电工证或者已经在外地拿到证但想在江苏执业的朋友最关心的问题。特别是像驻马店的应届工程类毕业生，毕业后想在江苏发展，却发现之前在外省考的证可能不被…
📰

松山湖低压电工证培训真实经历：学历不高也能考，这几点必须知道

松山湖低压电工证培训真实经历：学历不高也能考，这几点必须知道 你是不是也担心学历不高，连低压电工证都报不上名？其实不然，我之前在商丘做建筑工，学历只有初中，也能顺利考下低压电工证，今天就用我的 真实经历 告诉你， 松山湖低压电工证培训…
📰

不会电脑怎么考电工证 内部消息告诉你怎么操作

不会电脑怎么考电工证 内部消息告诉你怎么操作 之前考的证在外省能不能转过来？这个问题我听得太多了，尤其在安阳本地的劳务班组负责人，很多都遇到过这种情况。今天我就从一个从业多年的老手角度，告诉你 不会电脑怎么考电工证 ，以及如何通过…
TODAY

今日更新

🆕

桐乡去哪考电工证怎么考？全国通用电工证报考全流程详解

桐乡去哪考电工证怎么考？全国通用电工证报考全流程详解 你是桐乡人，刚到工地打工，老板一句话就敲醒了你： 没有电工证，别想上岗 。现在找工作，特种作业证成了硬门槛，特别是 全国通用…
🆕

低压电工证是必须的嘛电子证书怎么申请更稳妥

低压电工证是必须的嘛电子证书怎么申请更稳妥 学历不高怕报不上名，其实低压电工证是很多电工从业者的“门槛证”，但很多人并不清楚它到底是不是必须的。尤其是在一线施工现场，很多电工没有证书就被拒之门外。本文就围绕【低压电工证是必须的嘛】，从…
🆕

特种作业证模板工怎么报名才不会被中介坑

特种作业证模板工怎么报名才不会被中介坑 你是不是也遇到过这种情况？手里拿着一沓材料，满脑子想着怎么报名特种作业证模板工，结果转头就被各种中介忽悠得团团转？别急，今天咱们就聊聊这个证到底怎么报名，怎么避开那些坑，顺便给你支几招，让你少走弯路。…
THIS WEEK

本周精选

📌

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代，基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而，与配合度高的人类不同，宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态，更无法控制光照环境。实际应用中，我们常…
📌

基于DRV8818与STM32的双极步进电机驱动方案实战解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
📌

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
THIS MONTH

本月热门

🔥

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代，基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而，与配合度高的人类不同，宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态，更无法控制光照环境。实际应用中，我们常…
🔥

基于DRV8818与STM32的双极步进电机驱动方案实战解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
🔥

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

读完文章，想聊聊您的网站？

告诉我们您的行业与需求，资深顾问一对一梳理方案与报价，全程免费。

免费获取方案 400-888-6620
📞 💬