.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;// 提供一个公共属性，用于绑定到视图的SeriesCollectionpublic 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();