一、整体架构

1. 技术栈

  • 框架：WPF（.NET 4.7.2）

  • 图表库：LiveCharts 0.97.0（需注意版本适配性）

  • 设计模式：MVVM（Model-View-ViewModel）

2. 项目结构

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

二、核心知识点

1. MVVM 核心实现

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

  • 实现 INotifyPropertyChanged 接口，提供属性变更通知能力

  • SetProperty<T> 方法：简化属性赋值 + 通知逻辑，避免重复代码

protected bool SetProperty(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）图表系列配置
图表类型系列类核心配置项
折线图LineSeriesTitle（标题）、Values（数值）、Stroke（线条颜色）、PointGeometrySize（数据点大小）
柱状图ColumnSeriesTitle、Values、Fill（填充色）、Stroke（边框色）
饼图PieSeriesTitle、Values、DataLabels（是否显示标签）、LabelPoint（标签格式）、Fill（扇区颜色）
（3）坐标轴配置

    


    

  • 通过 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）数据上下文设置

    
（3）图表控件绑定

三、注意事项

  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 卡顿