封装:WPF绘制曲线视图

原文:封装:WPF绘制曲线视图

一、目的:绘制简单轻量级的曲线视图

二、实现:

1、动画加载曲线

2、点击图例显示隐藏对应曲线

3、绘制标准基准线

4、绘制蒙板显示标准区域

 

曲线图示例:

封装:WPF绘制曲线视图

心电图示例:

封装:WPF绘制曲线视图

三、实现代码

View:

  1. <echart:StaticCurveChartPlotter x:Name="chart" Background="White" DataSource="{Binding Collection}"
  2. FontSize="12" MaxValueY="400" MinValueY="0" MaxValueX="{Binding MaxValue}" MinValueX="{Binding MinValue}"
  3. IsLegendVisible="True" Height="200" Width="800">
  4. <!--MaxValueX="11" MinValueX="0"-->
  5. <echart:StaticCurveChartPlotter.SplitItemYs>
  6. <echart:SplitItem Color="DarkGray" Value="400" Text="400 " ></echart:SplitItem>
  7. <echart:SplitItem Color="DarkGray" Value="350" Text="350 " ></echart:SplitItem>
  8. <echart:SplitItem Color="DarkGray" Value="300" Text="300 "></echart:SplitItem>
  9. <echart:SplitItem Color="DarkGray" Value="250" Text="250"></echart:SplitItem>
  10. <echart:SplitItem Color="Red" Value="240" Text="240 mmHg" SpliteType="HeighLight"/>
  11. <echart:SplitItem Color="DarkGray" Value="200" Text="200"></echart:SplitItem>
  12. <echart:SplitItem Color="DarkGray" Value="150" Text="150"></echart:SplitItem>
  13. <echart:SplitItem Color="DarkGray" Value="100" Text="100" ></echart:SplitItem>
  14. <echart:SplitItem Color="Green" Value="90" Text="90 mmHg" SpliteType="HeighLight"></echart:SplitItem>
  15. <echart:SplitItem Color="DarkGray" Value="50" Text="50 "></echart:SplitItem>
  16. <echart:SplitItem Color="DarkGray" Value="0" Text="0 "></echart:SplitItem>
  17. </echart:StaticCurveChartPlotter.SplitItemYs> </echart:StaticCurveChartPlotter>

ViewModel:

  1. /// <summary> 说明 </summary>
  2. partial class MainWindowViewModel
  3. {
  4. private List<ICurveEntitySource> _collection = new List<ICurveEntitySource>();
  5. /// <summary> 曲线图数据 </summary>
  6. public List<ICurveEntitySource> Collection
  7. {
  8. get { return _collection; }
  9. set
  10. {
  11. _collection = value;
  12. RaisePropertyChanged("Collection");
  13. }
  14. }
  15. void Init()
  16. {
  17. RefreshCurveData();
  18. }
  19. public void RefreshCurveData()
  20. {
  21. List<ICurveEntitySource> collection = new List<ICurveEntitySource>();
  22. CurveEntitySource entity = new CurveEntitySource();
  23. entity.Text = "长度(km)";
  24. entity.Color = Brushes.Red;
  25. entity.Marker = new CirclePointMarker();
  26. entity.Marker.Fill = Brushes.Red;
  27. for (int i = 0; i < 20; i++)
  28. {
  29. PointC point = new PointC();
  30. point.X = i;
  31. point.Y = i*i;
  32. point.Text = DateTime.Now.AddDays(i).ToString("yyyy-MM-dd");
  33. entity.Source.Add(point);
  34. this.MinValue = this.MinValue > point.X ? point.X : this.MinValue;
  35. this.MaxValue = this.MaxValue < point.X ? point.X : this.MaxValue;
  36. }
  37. collection.Add(entity);
  38. entity = new CurveEntitySource();
  39. entity.Text = "重量(kg)";
  40. entity.Color = Brushes.Orange;
  41. entity.Marker = new T5PointMarker();
  42. entity.Marker.Fill = Brushes.Orange;
  43. for (int i = 0; i < 20; i++)
  44. {
  45. PointC point = new PointC();
  46. point.X = i;
  47. point.Y = (20-i) * (20 - i);
  48. point.Text = DateTime.Now.AddDays(i).ToString("yyyy-MM-dd");
  49. entity.Source.Add(point);
  50. this.MinValue = this.MinValue > point.X ? point.X : this.MinValue;
  51. this.MaxValue = this.MaxValue < point.X ? point.X : this.MaxValue;
  52. }
  53. collection.Add(entity);
  54. this.Collection = collection;
  55. }
  56. private double _maxValue = double.MinValue;
  57. /// <summary> 说明 </summary>
  58. public double MaxValue
  59. {
  60. get { return _maxValue; }
  61. set
  62. {
  63. _maxValue = value;
  64. RaisePropertyChanged("MaxValue");
  65. }
  66. }
  67. private double _minValue = double.MaxValue;
  68. /// <summary> 说明 </summary>
  69. public double MinValue
  70. {
  71. get { return _minValue; }
  72. set
  73. {
  74. _minValue = value;
  75. RaisePropertyChanged("MinValue");
  76. }
  77. }
  78. }
  79. partial class MainWindowViewModel : INotifyPropertyChanged
  80. {
  81. public MainWindowViewModel()
  82. {
  83. Init();
  84. }
  85. #region - MVVM -
  86. public event PropertyChangedEventHandler PropertyChanged;
  87. public void RaisePropertyChanged([CallerMemberName] string propertyName = "")
  88. {
  89. if (PropertyChanged != null)
  90. this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
  91. }
  92. #endregion
  93. }

结构设计:

封装:WPF绘制曲线视图

示例图片:

封装:WPF绘制曲线视图

封装:WPF绘制曲线视图

 

下载地址 :GitHut: https://github.com/HeBianGu/WpfChartProgram.git

 

 

上一篇:C# 关于数组的几个方法


下一篇:工控随笔_C#连接PLC_之_C#入门_03_基本数据类型