C# WPF 折线图制作笔记（LiveCharts 库）
C# WPF 折线图制作笔记（LiveCharts 库）
一、核心信息
1. 开发环境
.NET Framework 4.7.2
WPF 应用程序
核心库：LiveCharts、LiveCharts.Wpf（需通过 NuGet 安装）
2. 核心组件说明
| 组件 | 作用 |
|---|---|
| CartesianChart | LiveCharts 的核心图表控件，用于绘制笛卡尔坐标系图表（折线图、柱状图等） |
| SeriesCollection | 图表系列集合，存放多条折线的数据 |
| LineSeries | 折线系列，单条折线的样式、数据配置 |
| ChartValues<double> | 折线的数值集合，存储具体数据点 |
| Axis | 坐标轴配置（X 轴 / Y 轴），支持标题、标签、格式化器 |
二、实现步骤拆解
步骤 1：安装依赖库
通过 NuGet 包管理器安装：
LiveCharts（核心逻辑）
LiveCharts.Wpf（WPF 控件封装）
步骤 2：创建折线图用户控件（UCLineChart）
2.1 XAML 布局（UCLineChart.xaml）
<UserControl x:Class="LineChart2.UCLineChart" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:LineChart2" <!-- 引入LiveCharts.Wpf命名空间 --> xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <!-- 核心图表控件 --> <lvc:CartesianChart Series="{Binding SeriesCollection}" <!-- 绑定折线系列集合 --> LegendLocation="Right"> <!-- 图例位置：右侧 --> <!-- Y轴配置 --> <lvc:CartesianChart.AxisY> <lvc:Axis Title="Sales" <!-- Y轴标题 --> LabelFormatter="{Binding YFormatter}"> <!-- Y轴数值格式化 --> </lvc:Axis> </lvc:CartesianChart.AxisY> <!-- X轴配置 --> <lvc:CartesianChart.AxisX> <lvc:Axis Title="Month" <!-- X轴标题 --> Labels="{Binding Labels}"> <!-- X轴标签（文本） --> </lvc:Axis> </lvc:CartesianChart.AxisX> </lvc:CartesianChart> </Grid> </UserControl>2.2 后台逻辑（UCLineChart.xaml.cs）
using LiveCharts; using LiveCharts.Wpf; using System.Windows; using System.Windows.Controls; namespace LineChart2 { public partial class UCLineChart : UserControl { // 绑定属性：折线系列集合 public SeriesCollection SeriesCollection { get; set; } // 绑定属性：X轴标签 public string[] Labels { get; set; } // 绑定属性：Y轴数值格式化器 public Func<double, string> YFormatter { get; set; } public UCLineChart() { InitializeComponent(); // 1. 初始化折线系列集合 SeriesCollection = new SeriesCollection { // 第一条折线 new LineSeries { Title = "Series 1", // 折线名称（图例显示） Values = new ChartValues<double> { 4, 6, 5, 2, 7 } // 数据点 }, // 第二条折线 new LineSeries { Title = "Series 2", Values = new ChartValues<double> { 6, 7, 3, 4, 6 } } }; // 2. 配置X轴标签 Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May" }; // 3. 配置Y轴格式化器（货币格式） YFormatter = value => value.ToString("C"); // 4. 动态添加第三条折线（支持动画更新） SeriesCollection.Add(new LineSeries { Values = new ChartValues<double> { 5, 3, 2, 4 }, LineSmoothness = 0 // 折线平滑度：0=直线，1=最平滑 }); // 5. 动态追加数据点（支持动画更新） SeriesCollection[2].Values.Add(5d); // 6. 设置数据上下文（绑定生效） DataContext = this; } } }步骤 3：在主窗口引用用户控件（MainWindow.xaml）
<Window x:Class="LineChart2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:LineChart2" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Grid Margin="10"> <!-- 引用自定义折线图控件 --> <local:UCLineChart x:Name="ucLineChart" HorizontalAlignment="Stretch" <!-- 水平拉伸 --> VerticalAlignment="Stretch" <!-- 垂直拉伸 --> Background="#F5F5F5" <!-- 背景色 --> BorderBrush="#E0E0E0" <!-- 边框色 --> BorderThickness="1" /> <!-- 边框厚度 --> </Grid> </Grid> </Window>
三、关键特性说明
1. 动态更新数据
LiveCharts 支持动画更新，修改SeriesCollection或ChartValues会自动触发图表动画：
// 动态添加折线 SeriesCollection.Add(new LineSeries { Values = new ChartValues<double> { 1, 2, 3 } }); // 动态追加数据点 SeriesCollection[0].Values.Add(8d); // 动态修改数据点 SeriesCollection[1].Values[2] = 9d;2. 折线样式配置
LineSeries常用属性：
| 属性 | 作用 | 示例值 |
|---|---|---|
| LineSmoothness | 折线平滑度（0-1） | 0（直线）、0.5 |
| Stroke | 折线颜色 | Brushes.Red |
| StrokeThickness | 折线粗细 | 2 |
| PointGeometry | 数据点形状（圆形 / 方形等） | DefaultGeometries.Circle |
| PointForeground | 数据点填充色 | Brushes.Blue |
示例：自定义折线样式
new LineSeries { Title = "Custom Series", Values = new ChartValues<double> { 2, 5, 3, 8 }, LineSmoothness = 0.8, Stroke = Brushes.Orange, StrokeThickness = 3, PointGeometry = DefaultGeometries.Triangle, PointForeground = Brushes.Purple };3. 坐标轴自定义
// 自定义X轴 var axisX = new Axis { Title = "时间", Labels = new[] { "周一", "周二", "周三" }, LabelRotation = 15, // 标签旋转角度 Foreground = Brushes.Gray // 标签颜色 }; // 自定义Y轴 var axisY = new Axis { Title = "数值", MinValue = 0, // 最小值 MaxValue = 10, // 最大值 LabelFormatter = v => $"{v} 个" // 格式化标签 }; // 应用到图表 myCartesianChart.AxisX.Add(axisX); myCartesianChart.AxisY.Add(axisY);四、完整示例（扩展版）
需求
制作一个带动态数据、自定义样式的月度销量折线图，支持实时追加数据。
完整代码
1. UCLineChart.xaml
<UserControl x:Class="LineChart2.UCLineChart" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:LineChart2" xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <lvc:CartesianChart x:Name="chart" Series="{Binding SeriesCollection}" LegendLocation="Top" Background="White"> <lvc:CartesianChart.AxisY> <lvc:Axis Title="销量（件）" LabelFormatter="{Binding YFormatter}" Foreground="#333333"/> </lvc:CartesianChart.AxisY> <lvc:CartesianChart.AxisX> <lvc:Axis Title="月份" Labels="{Binding Labels}" Foreground="#333333"/> </lvc:CartesianChart.AxisX> </lvc:CartesianChart> <!-- 追加数据按钮 --> <Button Grid.Row="1" Content="追加6月数据" Width="120" Height="30" Margin="10" Click="BtnAddData_Click"/> </Grid> </UserControl>2. UCLineChart.xaml.cs
using LiveCharts; using LiveCharts.Defaults; using LiveCharts.Wpf; using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace LineChart2 { public partial class UCLineChart : UserControl { public SeriesCollection SeriesCollection { get; set; } public string[] Labels { get; set; } public Func<double, string> YFormatter { get; set; } // 模拟销量数据 private readonly Random _random = new Random(); public UCLineChart() { InitializeComponent(); // 初始化系列 SeriesCollection = new SeriesCollection { // 2024年销量 new LineSeries { Title = "2024年", Values = new ChartValues<double> { 120, 150, 110, 180, 160 }, LineSmoothness = 0.3, Stroke = Brushes.DodgerBlue, StrokeThickness = 2, PointGeometry = DefaultGeometries.Circle, PointGeometrySize = 8, PointForeground = Brushes.DodgerBlue }, // 2023年销量 new LineSeries { Title = "2023年", Values = new ChartValues<double> { 100, 130, 140, 150, 130 }, LineSmoothness = 0.3, Stroke = Brushes.OrangeRed, StrokeThickness = 2, PointGeometry = DefaultGeometries.Square, PointGeometrySize = 8, PointForeground = Brushes.OrangeRed } }; // X轴标签（1-5月） Labels = new[] { "1月", "2月", "3月", "4月", "5月" }; // Y轴格式化（显示整数） YFormatter = value => $"{value:N0}"; DataContext = this; } // 追加6月数据按钮点击事件 private void BtnAddData_Click(object sender, RoutedEventArgs e) { // 生成随机销量（100-200） double sales2024 = _random.Next(100, 200); double sales2023 = _random.Next(100, 200); // 追加数据点 SeriesCollection[0].Values.Add(sales2024); SeriesCollection[1].Values.Add(sales2023); // 更新X轴标签 // ArrResize(out Labels, Labels.Length + 1); Labels[Labels.Length - 1] = "6月"; // 刷新绑定（触发UI更新） chart.AxisX[0].Labels = Labels; } } }3. MainWindow.xaml（无修改）
<Window x:Class="LineChart2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:LineChart2" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Grid Margin="10"> <!-- 自定义折线图用户控件 --> <local:UCLineChart x:Name="ucLineChart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#F5F5F5" BorderBrush="#E0E0E0" BorderThickness="1" /> </Grid> </Grid> </Window>保持原代码不变，运行后可看到：
包含 2023/2024 年 1-5 月销量的折线图
点击 “追加 6 月数据” 按钮，动态添加 6 月随机销量数据，图表自动更新并播放动画
五、常见问题解决
NuGet 安装失败：确保选择与.NET Framework 4.7.2 兼容的 LiveCharts 版本（推荐 0.9.7）。
绑定不生效：检查
DataContext = this;是否执行，属性是否为公共属性（public）。图表无显示：确保
SeriesCollection有数据，且Labels长度与数据点数量匹配。动画卡顿：大量数据时可关闭动画：
chart.DisableAnimations = true;。
六、扩展方向
绑定 MVVM 架构：将
SeriesCollection等属性移到 ViewModel 中，实现数据与 UI 分离。数据导出：结合 Excel 库（如 EPPlus）将图表数据导出为 Excel。
交互增强：添加数据点点击事件、图例隐藏 / 显示、坐标轴缩放等功能。
样式定制：通过
Chart.Style或自定义模板修改图表整体样式。