简述:曲线,折线图,多条折线显示,添加动态数据,曲线动态变化;添加多个Y轴,对应不同曲线值,同时根据值变化。
1.前端代码:
<lvc:CartesianChart Grid.Row="2" LegendLocation="Top" >
<lvc:CartesianChart.AxisY >
<lvc:Axis Foreground="DodgerBlue" MinValue="0" Title="温度1号(℃)" ShowLabels="True" Position="LeftBottom">
<lvc:Axis.Separator>
<lvc:Separator Step="10" ></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
<lvc:Axis Foreground="Green" MinValue="0" Title="水分1号(PPM)" Position="LeftBottom" ShowLabels="True">
<lvc:Axis.Separator>
<lvc:Separator Step="10" ></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
<lvc:Axis Foreground="Black" MinValue="0" Title="真空1号(Pa)" Position="LeftBottom" ShowLabels="True">
<lvc:Axis.Separator>
<lvc:Separator Step="10" ></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.Series >
<lvc:LineSeries Values="{Binding Values1}" ScalesYAt="0" Stroke="DodgerBlue" Title="温度1号" >
</lvc:LineSeries>
<lvc:LineSeries Values="{Binding Values2}" ScalesYAt="1" Stroke="Green" Title="水分1号"/>
<lvc:LineSeries Values="{Binding Values3}" ScalesYAt="2" Stroke="Black" Title="真空1号"/>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
2.后台代码
this.DataContext = this;
Values1 =new ChartValues<double> { 1, 1, 2, 2, 3,1, 2};
Values2 = new ChartValues<double> { 100, 120, 140, 150, 100, 99, 130 };
Values3 = new ChartValues<double> { 400, 420, 430, 440, 450, 440, 480 };
Task.Run(CurrentData);
private void CurrentData()
{
var r = new Random();
while (true)
{
if (Values1.Count>50)
{
Values1.RemoveAt(0);
Values2.RemoveAt(0);
Values3.RemoveAt(0);
}
Values1.Add(r.Next(2,4));
Values2.Add(r.Next(100, 110));
Values3.Add(r.Next(400, 410));
Thread.Sleep(1000);
}
}
public ChartValues<double> Values1 { get; set; }
public ChartValues<double> Values2 { get; set; }
public ChartValues<double> Values3 { get; set; }
3.结果显示如下: