WPF 控件库Live Charts 动态折线图

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

效果图如下