WPF使用LiveCharts图表--基础用法

WPF使用LiveChart的安装和基础用法

LiveCharts安装

1、右键单击引用，然后管理 NuGet 程序包

2、搜索LiveCharts，安装LiveCharts.Wpf

3、确认是否安装完成

在已安装查看是否安装完成，安装LiveCharts.Wpf会自动安装依赖项LiveCharts，2个都安装了说明安装完成

LiveCharts使用

添加命名空间引用:

XAML：

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

CS:

using LiveCharts;
using LiveCharts.Wpf;

使用：

xaml中加入chart，界面上自动显示图表和示例的曲线，此时运行不会显示曲线，数据需要自己添加，以下以曲线图为例。

<lvc:CartesianChart  />

方式一：直接前端绘制曲线数据

 <lvc:CartesianChart Name="chart">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries
                    Fill="LightGreen"
                    Stroke="Green"
                    Values="1,4,5,10,20,5,10" />
            </lvc:CartesianChart.Series>
        </lvc:CartesianChart>

运行显示：

方式二：后端事件添加数据

Xaml：

   <lvc:CartesianChart  Name="chart"/>

CS:

    SeriesCollection series = new SeriesCollection()
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 3, 5, 7, 4 },
            Fill=new SolidColorBrush(Colors.IndianRed),
        },

    };
    chart.Series = series;

效果：

方式三：MVVM绑定

XAML

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

CS：

绑定:

  //MainWindow中进行绑定
  this.DataContext = new MainViewModel();
  
  //MainWindow的ViewModel类
   public class MainViewModel : INotifyPropertyChanged
    {
       
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string name = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        private SeriesCollection _series;
        public SeriesCollection Series
        {
            get
            {
                return _series;
            }
            set
            {
                _series = value;
                OnPropertyChanged();
            }
        }


        public MainViewModel()
        {
            Series = new SeriesCollection()
            {
                new LineSeries
                {
                    Values = new ChartValues<double> { 3, 5, 7, 4,100,50,2 },
                    Fill=new SolidColorBrush(Colors.LightGreen),
                },

            };
        }
    }

效果：

进一步结合的绑定方式：

绑定LineSeries中的Values，ViewModel中为ChartValues<double>类型

xaml：

 <lvc:CartesianChart Name="chart" Margin="478,334,0,0">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries
                    Fill="LightGreen"
                    Stroke="Green"
                    Values="{Binding SeriesValues}" />
            </lvc:CartesianChart.Series>
        </lvc:CartesianChart>

CS代码:

    VM：
添加属性
private ChartValues<double> _seriesValues;
public ChartValues<double> SeriesValues
{
    get
    {
        return _seriesValues;
    }
    set
    {
        _seriesValues = value;
        OnPropertyChanged();
    }
}

初始化数据：
SeriesValues = new ChartValues<double> { 13, 25, 57, 4, 4, 150, 99 };

    

效果：