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. 数据流转逻辑

1. 初始化：MainViewModel 构造函数创建 ChartDataViewModel → ChartDataViewModel 调用 InitChartData 初始化测试数据

2. 绑定：View 层通过 DataContext 绑定 MainViewModel，UI 元素绑定对应属性（如 Series、Labels）

3. 更新：点击 "更新数据" 按钮 → 触发 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">

三、注意事项

1. 版本适配：代码基于 LiveCharts 0.97.0，部分 API（如 SeriesView、ChartPoint）与高版本不兼容

2. 自动更新：ChartValues 容器修改数据后自动通知 UI 更新，无需手动调用 OnPropertyChanged

3. 饼图数据格式：PieSeries 的 Values 需传入单个数值的 ChartValues<double>（0.97.0 版本特性）

4. 命令绑定：RelayCommand 需确保 Action 不为 null，否则抛出 ArgumentNullException

5. 颜色配置：饼图扇区颜色通过自定义方法 GetPieColor 实现，避免重复颜色

四、扩展方向

1. 增加数据验证：确保更新数据时数值在合理范围

2. 支持多系列图表：如折线图同时展示多个产品销售额

3. 导出图表：结合 WPF 打印 / 保存功能，实现图表导出为图片

4. 动态样式：通过绑定实现图表样式（颜色、大小）的动态切换

5. 数据加载优化：异步加载大数据量图表数据，避免 UI 卡顿