封装：WPF绘制曲线视图

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

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

二、实现：

1、动画加载曲线

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

3、绘制标准基准线

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

曲线图示例：

心电图示例：

三、实现代码

View：

<echart:StaticCurveChartPlotter x:Name="chart" Background="White" DataSource="{Binding Collection}"





                                            FontSize="12" MaxValueY="400" MinValueY="0" MaxValueX="{Binding MaxValue}" MinValueX="{Binding MinValue}" 





                                            IsLegendVisible="True" Height="200" Width="800">





                            <!--MaxValueX="11" MinValueX="0"-->





                            <echart:StaticCurveChartPlotter.SplitItemYs>





                                <echart:SplitItem Color="DarkGray" Value="400" Text="400 " ></echart:SplitItem>





                                <echart:SplitItem Color="DarkGray" Value="350" Text="350 " ></echart:SplitItem>





                                <echart:SplitItem Color="DarkGray" Value="300" Text="300 "></echart:SplitItem>





                                <echart:SplitItem Color="DarkGray" Value="250" Text="250"></echart:SplitItem>





                                <echart:SplitItem Color="Red" Value="240"  Text="240 mmHg" SpliteType="HeighLight"/>





                                <echart:SplitItem Color="DarkGray" Value="200" Text="200"></echart:SplitItem>





                                <echart:SplitItem Color="DarkGray" Value="150" Text="150"></echart:SplitItem>





                                <echart:SplitItem Color="DarkGray" Value="100" Text="100" ></echart:SplitItem>





                                <echart:SplitItem Color="Green" Value="90"  Text="90 mmHg"  SpliteType="HeighLight"></echart:SplitItem>





                                <echart:SplitItem Color="DarkGray" Value="50" Text="50 "></echart:SplitItem>





                                <echart:SplitItem Color="DarkGray" Value="0" Text="0 "></echart:SplitItem>





                            </echart:StaticCurveChartPlotter.SplitItemYs> </echart:StaticCurveChartPlotter>

ViewModel：

    /// <summary> 说明 </summary>





    partial class MainWindowViewModel





    {





        private List<ICurveEntitySource> _collection = new List<ICurveEntitySource>();





        /// <summary> 曲线图数据 </summary>





        public List<ICurveEntitySource> Collection





        {





            get { return _collection; }





            set





            {





                _collection = value;





                RaisePropertyChanged("Collection");





            }





        }





 





        void Init()





        {





            RefreshCurveData();





        }





 





       public  void RefreshCurveData()





        {





 





            List<ICurveEntitySource> collection = new List<ICurveEntitySource>();





 





            CurveEntitySource entity = new CurveEntitySource();





            entity.Text = "长度(km)";





            entity.Color = Brushes.Red;





            entity.Marker = new CirclePointMarker();





 





            entity.Marker.Fill = Brushes.Red;





 





            for (int i = 0; i < 20; i++)





            {





                PointC point = new PointC();





                point.X = i;





                point.Y = i*i;





                point.Text = DateTime.Now.AddDays(i).ToString("yyyy-MM-dd");





                entity.Source.Add(point);





 





                this.MinValue = this.MinValue > point.X ? point.X : this.MinValue;





                this.MaxValue = this.MaxValue < point.X ? point.X : this.MaxValue;





 





            }





            collection.Add(entity);





 





            entity = new CurveEntitySource();





            entity.Text = "重量(kg)";





            entity.Color = Brushes.Orange;





            entity.Marker = new  T5PointMarker();





 





            entity.Marker.Fill = Brushes.Orange;





 





            for (int i = 0; i < 20; i++)





            {





                PointC point = new PointC();





                point.X = i;





                point.Y = (20-i) * (20 - i);





                point.Text = DateTime.Now.AddDays(i).ToString("yyyy-MM-dd");





                entity.Source.Add(point);





 





                this.MinValue = this.MinValue > point.X ? point.X : this.MinValue;





                this.MaxValue = this.MaxValue < point.X ? point.X : this.MaxValue;





 





            }





            collection.Add(entity);





 





            this.Collection = collection;





 





        }





 





        private double _maxValue = double.MinValue;





        /// <summary> 说明 </summary>





        public double MaxValue





        {





            get { return _maxValue; }





            set





            {





                _maxValue = value;





                RaisePropertyChanged("MaxValue");





            }





        }





 





        private double _minValue = double.MaxValue;





        /// <summary> 说明 </summary>





        public double MinValue





        {





            get { return _minValue; }





            set





            {





                _minValue = value;





                RaisePropertyChanged("MinValue");





            }





        }





    }





 





    partial class MainWindowViewModel : INotifyPropertyChanged





    {





        public MainWindowViewModel()





        {





            Init();





        }





 





        #region - MVVM -





 





        public event PropertyChangedEventHandler PropertyChanged;





 





        public void RaisePropertyChanged([CallerMemberName] string propertyName = "")





        {





            if (PropertyChanged != null)





                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));





        }





 





        #endregion





    }

结构设计：

示例图片：

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