WPF LiveChart控件基础属性介绍
在Nuget添加方法如下:
然后在xaml中添加引用:
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
调用控件:
<lvc:CartesianChart Name="chart" Margin="40">
<lvc:CartesianChart.AxisY>
<lvc:Axis MaxValue="200" MinValue="0">
</lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.Series>
<lvc:LineSeries Stroke="Blue" Values="{Binding SeriesValues}" Title="波形" LineSmoothness="0" StrokeThickness="5"/>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
ViewModel中添加绑定的属性:
private ChartValues<double> _seriesValues;
public ChartValues<double> SeriesValues
{
get { return _seriesValues; }
set { _seriesValues = value; this.DoNotify(); }
}
初始化数据:
SeriesValues = new ChartValues<double> { 10, 50, 100, 60, 200, 120 };
效果:
属性介绍:
属性 | 介绍 |
---|---|
Stroke | 折线颜色 |
Fill | 填充颜色 |
LineSmoothness | 折线是否光滑 ,数字越大越光滑 |
StrokeThickness | 折线粗细 |
StrokeDashArray | 折线样式,虚线 |
应用一:
xaml代码:
<lvc:CartesianChart Name="chart2" Margin="40 60" LegendLocation="Top">
<lvc:CartesianChart.AxisX>
<lvc:Axis MinValue="0" MaxValue="100" Title="参数一" Foreground="LightCoral" FontSize="14">
<lvc:Axis.Separator>
<lvc:Separator StrokeThickness="1" Stroke="LightSalmon" Step="10"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis MinValue="0" MaxValue="1000" Title="参数二" Foreground="LightCoral" FontSize="14">
<lvc:Axis.Separator>
<lvc:Separator StrokeThickness="1" Stroke="LightSalmon"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.Series>
<lvc:LineSeries Stroke="Green" Values="{Binding SeriesValues2}" Title="调控曲线" LineSmoothness="0" StrokeThickness="3" DataLabels="True" PointGeometry="{x:Null}"/>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
ViewModel中添加绑定的属性:
private ChartValues<ObservablePoint> _seriesValues2;
public ChartValues<ObservablePoint> SeriesValues2
{
get { return _seriesValues2; }
set { _seriesValues2 = value; this.DoNotify(); }
}
初始化数据:
SeriesValues2 = new ChartValues<ObservablePoint>();
SeriesValues2.Add(new ObservablePoint() { X = 10, Y = 20 });
SeriesValues2.Add(new ObservablePoint() { X = 20, Y = 50 });
SeriesValues2.Add(new ObservablePoint() { X = 40, Y = 500 });
SeriesValues2.Add(new ObservablePoint() { X = 100, Y = 800 });
效果:
参考
https://blog.csdn.net/qq_23176133/article/details/86600158
https://www.cnblogs.com/ggll611928/p/17693515.html