.NET_WPF_使用Livecharts数据绑定图表

相关概念

• LiveCharts 是一个开源的图表库，适用于多种 .NET 平台，包括 WPF、UWP、WinForms 等。
• LiveCharts 通过数据绑定与 MVVM 模式兼容，使得视图模型可以直接控制图表的显示，无需直接操作 UI 元素。这使得代码更加模块化，易于维护和测试。
• 在WPF中通过XAML代码实现生成不同的图表。

---

 WPF中 LiveCharts 不同图表类型

图表类型	XML示例
折线图（Line Chart）	<lvc:LineChart Series="{Binding SeriesCollection}">
柱状图（Column Chart）	<lvc:ColumnChart Series="{Binding SeriesCollection}">
饼图（Pie Chart）	<lvc:PieChart Series="{Binding SeriesCollection}">
散点图（Scatter Chart）	<lvc:ScatterChart Series="{Binding SeriesCollection}">
雷达图（Radar Chart）	<lvc:RadarChart Series="{Binding SeriesCollection}">

---

模拟股票监控demo:

步骤：

1. 安装livecharts。
2. 定义 ViewModel。
3. 定义View。
4. 在view后端进行数据绑定。
5. 运行文件。

操作图例

步骤1.	步骤3.
步骤5.

步骤2.

using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Timers;

namespace test.ModelView
{
    // 定义一个名为StockPriceViewModel的公共类，实现INotifyPropertyChanged接口
    public class StockPriceViewModel : INotifyPropertyChanged
    {
        // 声明一个私有变量，用于存储图表系列集合
        private SeriesCollection seriesCollection;
        // 声明一个私有变量，用于存储图表的值集合
        private ChartValues<decimal> priceValues;
        // 声明一个私有变量，用于存储时间格式化函数
        private Func<double, string> dateTimeFormatter;

        // 提供一个公共属性，用于绑定到视图的SeriesCollection
        public SeriesCollection SeriesCollection
        {
            get { return seriesCollection; } // 获取系列集合
            set
            {
                seriesCollection = value; // 设置系列集合
                OnPropertyChanged(nameof(SeriesCollection)); // 通知属性已更改
            }
        }

        // 提供一个公共属性，用于绑定到视图的时间格式化函数
        public Func<double, string> DateTimeFormatter
        {
            get { return dateTimeFormatter; } // 获取时间格式化函数
            set
            {
                dateTimeFormatter = value; // 设置时间格式化函数
                OnPropertyChanged(nameof(DateTimeFormatter)); // 通知属性已更改
            }
        }

        // 构造函数，当创建StockPriceViewModel实例时执行
        public StockPriceViewModel()
        {
            priceValues = new ChartValues<decimal>(); // 初始化价格值集合
            SeriesCollection = new SeriesCollection // 初始化系列集合，并添加一个折线系列
            {
                new LineSeries
                {
                    Values = priceValues // 将价格值集合赋给折线系列的Values属性
                }
            };

            // 设置X轴为时间，并定义格式化显示的函数
            DateTimeFormatter = value => new DateTime((long)value).ToString("HH:mm:ss");

            // 创建一个定时器，用于模拟实时数据更新
            var timer = new Timer(1000); // 设置定时器间隔为1000毫秒（1秒）
            timer.Elapsed += (sender, args) => UpdatePrice(); // 当定时器触发时调用UpdatePrice方法
            timer.Start(); // 启动定时器
        }

        // 更新价格的私有方法，用于模拟新价格的添加
        private void UpdatePrice()
        {
            var newPrice = new Random().Next(100, 200); // 生成一个100到200之间的随机价格
            priceValues.Add(newPrice); // 将新价格添加到价格值集合中
            OnPropertyChanged(nameof(SeriesCollection)); // 通知SeriesCollection属性已更改
        }

        // 声明一个公共事件，用于通知属性更改
        public event PropertyChangedEventHandler PropertyChanged;

        // 受保护的虚方法，用于触发属性更改事件
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); // 触发事件
        }
    }


}

步骤3.

    <Grid>
        <lvc:CartesianChart Series="{Binding SeriesCollection}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="时间" LabelFormatter="{Binding DateTimeFormatter}" />
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="价格" />
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>

步骤4.

            InitializeComponent();
            this.DataContext = new StockPriceViewModel();