WPF图表Live Charts（一）基础

简介

Live Chart一个开源的项目，控件使用简单，有充足的实列和丰富的文档资料。同时界面也比较美观，可定制性也很高。官网地址：https://lvcharts.net。
官网有详细的介绍和丰富的实例，大家可以自行查看。本人主要介绍一下官网的教程同时补充说明一下官方教程没有说明的一些地方。

安装Live Charts的库

右键单击项目的引用节点，然后选择“Manage NuGet Packages”，然后搜索Live Charts，安装即可。

添加Live Charts名称空间

XAML引用名称空间

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

后台代码引用名称空间

using LiveCharts;
using LiveCharts.Wpf;

窗口界面添加图表控件

<lvc:CartesianChart Series="{Binding SeriesCollection}" />

将上面代码块放到Gaid等容器控件内，就添加了Live Chart控件。其中CartesianChart为图表控件，通过Binding进行数据绑定。

后台代码

首先声明属性SeriesCollection

 public SeriesCollection SeriesCollection { get; set; }

添加曲线和数据

            SeriesCollection = new SeriesCollection
            {
                new LineSeries
                {
                    Values = new ChartValues<double> { 3, 5, 7, 4 }
                },
                 new ColumnSeries
                {
                    Values = new ChartValues<decimal> { 5, 6, 2, 7 }
                }
            };

LineSeries为折线图，ColumnSeries为柱状图。
绑定数据

DataContext = this;

通过DataContext绑定XAML的数据。

完整代码如下

<Window x:Class="chart_line.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:chart_line"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <lvc:CartesianChart Series="{Binding SeriesCollection}" />
    </Grid>
</Window>

using LiveCharts;
using LiveCharts.Wpf;

namespace chart_line
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public SeriesCollection SeriesCollection { get; set; }
        public MainWindow()
        {
            InitializeComponent();

            SeriesCollection = new SeriesCollection
            {
                new LineSeries
                {
                    Values = new ChartValues<double> { 3, 5, 7, 4 }
                },
                 new ColumnSeries
                {
                    Values = new ChartValues<decimal> { 5, 6, 2, 7 }
                }
            };
            DataContext = this;
        }
    }
}

运行截图

一组折线图，一组柱状图。