Live Charts库安装通过
1、PM> Install-Package LiveCharts.Wpf
2、通过Nuget搜索添加LiveCharts.Wpf安装
WPF页面xaml
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication3"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<lvc:CartesianChart Series="{Binding seriesColloection}" LegendLocation="Right" Name="mygrid" Height="800">
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Time" Labels="{Binding labels}" FontSize="14"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis MaxValue="10" MinValue="-5" MinRange="-5" MaxRange="10" Title="D"/>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
<Button Height="20" Click="Button_Click">UpdateValue</Button>
</StackPanel>
</Window>
后台.CS
using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication3
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public SeriesCollection seriesColloection { get; set; }//系列集合
public ObservableCollection<string> labels { get; set; }
public ObservableCollection<double> yA = new ObservableCollection<double>();
public ObservableCollection<double> yB = new ObservableCollection<double>();
private double _trend;
public MainWindow()
{
InitializeComponent();
for (int i = 0; i < 10; i++)
{
yA.Add(i);
yB.Add(i + 0.8);
}
//实例化一条折线图A
LineSeries lineA = new LineSeries();
//设置折线的标题
lineA.Title = "lineA";
//折线图直线形式
lineA.LineSmoothness = 0;
//折线图的无点样式
lineA.PointGeometry = null;
//添加折线图的数据
lineA.Values = new ChartValues<double>(yA);
//实例化一条折线图B
LineSeries lineB = new LineSeries();
//设置折线的标题
lineB.Title = "lineB";
//折线图直线形式
lineB.LineSmoothness = 0;
//折线图的无点样式
lineB.PointGeometry = null;
//添加折线图的数据
lineB.Values = new ChartValues<double>(yB);
//添加横坐标
labels = new ObservableCollection<string> { "1", "3", "2", "4", "-3", "5", "2", "1" };
seriesColloection = new SeriesCollection { };
seriesColloection.Add(lineA);
seriesColloection.Add(lineB);
DataContext = this;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var r = new Random();
_trend = r.Next(0, 10);
Application.Current.Dispatcher.Invoke(() =>
{
seriesColloection[0].Values.Add(_trend);
seriesColloection[0].Values.RemoveAt(0);
});
}
}
}
实现效果如下
注意事项
Values
:绑定C#代码中的实际数据值 。PointGeometry
:数据点的外观。{x:Null}
即不标出,只显示曲线。{x:Static lvc:DefaultGeometries.Circle}
则将数据点用圆形标出。形状有Circle
、Cross
、Diamond
、Square
、Triangle
可选。PointGeometrySize
:数据点形状的大小。LineSmoothness
:曲线是否圆滑。如为1
则圆滑曲线,为0
则不圆滑,为折线。StrokeThickness
:曲线粗细程度,越大越粗。Stroke
:曲线颜色。Fill
:曲线下方填充颜色。Transparent
透明,即不填充。ScalesYAt
:曲线对应Y坐标轴,序号从0
开始,默认0
。
坐标轴参数:
Title
:坐标轴名称。Foreground
:名称和刻度的颜色。Position
:坐标轴位置。MaxValue
:最大值,不写则会根据数据自动变化。MinValue
:最小值,同上。Separator
:网格线,IsEnabled
决定是否显示,Step
为网格一格的大小,不写则自动。Labels
:标签。LabelFormatter
:标签格式,如把数值格式化为时间,详见官网教程。
特殊情况处理:如果你的值并非连续,或者会出现空值,会造成折线不连续则需要考虑设置值为double.NaN
效果图如下