图表可视化LiveCharts2集成这是「从零搭建工业控制系统」系列第19篇。前面讲了数据存储这篇讲数据展示——怎么用LiveCharts2在WPF里画实时图表。为什么选LiveCharts2工业系统需要实时图表——气体流量趋势、压力变化曲线、温度走势。WPF自带的图表控件没有得用第三方。选型时对比了几个库优点缺点LiveCharts2WPF原生、开源、实时更新好文档少OxyPlot功能全、成熟API复杂、实时更新慢ScottPlot性能好WPF支持弱自己画Canvas完全可控工作量大选LiveCharts2的原因实时更新做得好。工业数据每秒都在变图表要跟着变。LiveCharts2用ObservableCollection绑定数据变了图表自动更新不用手动刷新。基本折线图最简单的实时折线图lvc:CartesianChartSeries{Binding SeriesCollection}/publicObservableCollectionISeriesSeriesCollection{get;}new();// 初始化SeriesCollection.Add(newLineSeriesdouble{ValuesnewObservableCollectiondouble(),Name通道A流量,StrokenewSolidColorPaint(SKColors.SteelBlue),FillnewSolidColorPaint(SKColors.SteelBlue.WithAlpha(50))});添加数据点varvalues(ObservableCollectiondouble)SeriesCollection[0].Values;values.Add(currentFlow);数据点加了图表自动更新。不用调 InvalidateVisual不用手动刷新。多通道同时显示气体流量有多个通道需要同时画在一张图上foreach(varchannelinchannels){SeriesCollection.Add(newLineSeriesdouble{ValuesnewObservableCollectiondouble(),Namechannel.Name,StrokenewSolidColorPaint(channel.Color)});}每条线一个Series颜色区分。图例自动生成。性能优化数据点控制这是最大的坑。实时图表每秒加一个点跑一天就是86400个点。图表渲染8万个点会卡。解决办法限制数据点数量。privateconstintMAX_POINTS300;// 最多300个点privatevoidAddDataPoint(ObservableCollectiondoublevalues,doublenewValue){values.Add(newValue);if(values.CountMAX_POINTS){values.RemoveAt(0);// 移除最老的点}}300个点相当于5分钟的数据每秒一个点。操作员看趋势不需要看一整天的数据看最近几分钟就够了。如果要看历史数据从数据库查用单独的历史图表展示不影响实时图表的性能。性能优化渲染降频另一个性能问题数据每秒更新但图表不需要每秒重绘。人眼分辨不出60fps以上的变化。privateDateTime_lastUpdateDateTime.MinValue;privateconstintUPDATE_INTERVAL_MS200;// 200ms更新一次privatevoidOnDataReceived(doublevalue){if((DateTime.Now-_lastUpdate).TotalMillisecondsUPDATE_INTERVAL_MS)return;_lastUpdateDateTime.Now;AddDataPoint(values,value);}200ms更新一次每秒5帧足够看趋势了。CPU占用从30%降到5%。轴配置时间轴用日期格式lvc:CartesianChartlvc:CartesianChart.XAxeslvc:AxisLabeler{Binding TimeSpanLabeler}//lvc:CartesianChart.XAxeslvc:CartesianChart.YAxeslvc:AxisName流量(sccm)MinLimit0//lvc:CartesianChart.YAxes/lvc:CartesianChartY轴设了MinLimit0流量不会显示负数。踩坑记录坑1数据点太多卡顿一开始没限制数据点数量跑了两小时后图表卡得动不了。加了MAX_POINTS限制后解决。坑2图表不释放内存页面切换后图表还在后台更新。需要在页面卸载时清空SeriesCollection取消订阅数据源。坑3轴标签格式化时间轴默认显示秒数操作员看不懂。自定义Labeler改成HH:mm:ss格式。本篇小结概念关键做法实时绑定ObservableCollection自动更新多通道每条线一个Series数据点限制最多300个点FIFO渲染降频200ms更新一次轴配置自定义Labeler和范围实时图表的核心控制数据量。点太多会卡更新太快会卡。限制点数降频更新是关键。下期预告第20篇MVVM消息传递机制图表讲完了下篇讲ViewModel之间怎么通信——消息机制、弱引用、避免内存泄漏。
图表可视化LiveCharts2集成这是「从零搭建工业控制系统」系列第19篇。前面讲了数据存储这篇讲数据展示——怎么用LiveCharts2在WPF里画实时图表。为什么选LiveCharts2工业系统需要实时图表——气体流量趋势、压力变化曲线、温度走势。WPF自带的图表控件没有得用第三方。选型时对比了几个库优点缺点LiveCharts2WPF原生、开源、实时更新好文档少OxyPlot功能全、成熟API复杂、实时更新慢ScottPlot性能好WPF支持弱自己画Canvas完全可控工作量大选LiveCharts2的原因实时更新做得好。工业数据每秒都在变图表要跟着变。LiveCharts2用ObservableCollection绑定数据变了图表自动更新不用手动刷新。基本折线图最简单的实时折线图lvc:CartesianChartSeries{Binding SeriesCollection}/publicObservableCollectionISeriesSeriesCollection{get;}new();// 初始化SeriesCollection.Add(newLineSeriesdouble{ValuesnewObservableCollectiondouble(),Name通道A流量,StrokenewSolidColorPaint(SKColors.SteelBlue),FillnewSolidColorPaint(SKColors.SteelBlue.WithAlpha(50))});添加数据点varvalues(ObservableCollectiondouble)SeriesCollection[0].Values;values.Add(currentFlow);数据点加了图表自动更新。不用调 InvalidateVisual不用手动刷新。多通道同时显示气体流量有多个通道需要同时画在一张图上foreach(varchannelinchannels){SeriesCollection.Add(newLineSeriesdouble{ValuesnewObservableCollectiondouble(),Namechannel.Name,StrokenewSolidColorPaint(channel.Color)});}每条线一个Series颜色区分。图例自动生成。性能优化数据点控制这是最大的坑。实时图表每秒加一个点跑一天就是86400个点。图表渲染8万个点会卡。解决办法限制数据点数量。privateconstintMAX_POINTS300;// 最多300个点privatevoidAddDataPoint(ObservableCollectiondoublevalues,doublenewValue){values.Add(newValue);if(values.CountMAX_POINTS){values.RemoveAt(0);// 移除最老的点}}300个点相当于5分钟的数据每秒一个点。操作员看趋势不需要看一整天的数据看最近几分钟就够了。如果要看历史数据从数据库查用单独的历史图表展示不影响实时图表的性能。性能优化渲染降频另一个性能问题数据每秒更新但图表不需要每秒重绘。人眼分辨不出60fps以上的变化。privateDateTime_lastUpdateDateTime.MinValue;privateconstintUPDATE_INTERVAL_MS200;// 200ms更新一次privatevoidOnDataReceived(doublevalue){if((DateTime.Now-_lastUpdate).TotalMillisecondsUPDATE_INTERVAL_MS)return;_lastUpdateDateTime.Now;AddDataPoint(values,value);}200ms更新一次每秒5帧足够看趋势了。CPU占用从30%降到5%。轴配置时间轴用日期格式lvc:CartesianChartlvc:CartesianChart.XAxeslvc:AxisLabeler{Binding TimeSpanLabeler}//lvc:CartesianChart.XAxeslvc:CartesianChart.YAxeslvc:AxisName流量(sccm)MinLimit0//lvc:CartesianChart.YAxes/lvc:CartesianChartY轴设了MinLimit0流量不会显示负数。踩坑记录坑1数据点太多卡顿一开始没限制数据点数量跑了两小时后图表卡得动不了。加了MAX_POINTS限制后解决。坑2图表不释放内存页面切换后图表还在后台更新。需要在页面卸载时清空SeriesCollection取消订阅数据源。坑3轴标签格式化时间轴默认显示秒数操作员看不懂。自定义Labeler改成HH:mm:ss格式。本篇小结概念关键做法实时绑定ObservableCollection自动更新多通道每条线一个Series数据点限制最多300个点FIFO渲染降频200ms更新一次轴配置自定义Labeler和范围实时图表的核心控制数据量。点太多会卡更新太快会卡。限制点数降频更新是关键。下期预告第20篇MVVM消息传递机制图表讲完了下篇讲ViewModel之间怎么通信——消息机制、弱引用、避免内存泄漏。
