封装：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">

<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
}