LiveCharts WPF MVVM 图表开发笔记-洪萨配资

一、整体架构

1. 技术栈

框架：WPF（.NET 4.7.2）
图表库：LiveCharts 0.97.0（需注意版本适配性）
设计模式：MVVM（Model-View-ViewModel）

2. 项目结构

命名空间	类名	作用
WpfApp4.Views	MainWindow	视图层，负责 UI 展示和交互事件（如饼图点击）
WpfApp4.ViewModels	MainViewModel	主视图模型，管理图表子 VM 和更新命令
WpfApp4.ViewModels	ChartDataViewModel	图表数据 VM，封装图表数据和系列配置
WpfApp4.ViewModels	BaseViewModel	基础 VM，实现 INotifyPropertyChanged
WpfApp4.ViewModels	RelayCommand	命令实现，绑定 UI 操作（如更新按钮）
WpfApp4.Models	ChartDataModel	数据模型，存储图表原始数据

二、核心知识点

1. MVVM 核心实现

（1）BaseViewModel（属性通知基类）

实现INotifyPropertyChanged接口，提供属性变更通知能力
SetProperty<T>方法：简化属性赋值 + 通知逻辑，避免重复代码

protected bool SetProperty<T>(ref T field, T value, [CallerMemberName] string propertyName = null) { if (Equals(field, value)) return false; field = value; OnPropertyChanged(propertyName); return true; }

（2）RelayCommand（命令绑定）

实现ICommand接口，绑定 UI 操作（如按钮点击）
支持无参数执行和可执行状态判断（默认返回 true）
命令变更通过CommandManager.RequerySuggested触发

2. LiveCharts 0.97.0 关键用法

（1）数据容器

ChartValues<double>：LiveCharts 核心数据容器，支持自动通知 UI 更新（无需手动触发 PropertyChanged）
适用于折线图、柱状图、饼图的数值存储

（2）图表系列配置

图表类型	系列类	核心配置项
折线图	LineSeries	Title（标题）、Values（数值）、Stroke（线条颜色）、PointGeometrySize（数据点大小）
柱状图	ColumnSeries	Title、Values、Fill（填充色）、Stroke（边框色）
饼图	PieSeries	Title、Values、DataLabels（是否显示标签）、LabelPoint（标签格式）、Fill（扇区颜色）

（3）坐标轴配置

<lvc:CartesianChart.AxisX> <lvc:Axis Title="月份" Labels="{Binding ChartDataVM.ChartData.XAxisLabels}"/> </lvc:CartesianChart.AxisX> <lvc:CartesianChart.AxisY> <lvc:Axis Title="销售额(万元)"/> </lvc:CartesianChart.AxisY>

通过Labels绑定字符串列表实现 X 轴标签自定义
支持设置坐标轴标题

（4）饼图交互

数据点击事件DataClick：通过ChartPoint获取系列信息
0.97.0 版本需将SeriesView强转为PieSeries获取标题

private void PieChart_DataClick(object sender, ChartPoint chartPoint) { var pieSeries = chartPoint.SeriesView as PieSeries; if (pieSeries != null) { MessageBox.Show($"产品：{pieSeries.Title}\n占比：{chartPoint.Y:F1}%", "数据详情", MessageBoxButton.OK, MessageBoxImage.Information); } }

3. 数据流转逻辑

初始化：MainViewModel 构造函数创建 ChartDataViewModel → ChartDataViewModel 调用 InitChartData 初始化测试数据
绑定：View 层通过 DataContext 绑定 MainViewModel，UI 元素绑定对应属性（如 Series、Labels）
更新：点击 “更新数据” 按钮 → 触发 UpdateDataCommand → 调用 ChartDataViewModel.UpdateChartData → 随机更新 ChartValues 数据 → LiveCharts 自动刷新 UI

4. XAML 关键配置

（1）命名空间引入

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

（2）数据上下文设置

<Window.DataContext> <vm:MainViewModel/> </Window.DataContext>

（3）图表控件绑定

<!-- 折线图 --> <lvc:CartesianChart Grid.Row="1" Series="{Binding ChartDataVM.LineSeries}"> <!-- 饼图 --> <lvc:PieChart Grid.Row="1" Series="{Binding ChartDataVM.PieSeries}" LegendLocation="Right" DataClick="PieChart_DataClick">