C# WPF 折线图制作笔记（LiveCharts 库）

C# WPF 折线图制作笔记（LiveCharts 库）

一、核心信息

1. 开发环境

• .NET Framework 4.7.2

• WPF 应用程序

• 核心库：LiveCharts、LiveCharts.Wpf（需通过 NuGet 安装）

2. 核心组件说明

二、实现步骤拆解

步骤 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常用属性：

示例：自定义折线样式

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 月随机销量数据，图表自动更新并播放动画

五、常见问题解决

1. NuGet 安装失败：确保选择与.NET Framework 4.7.2 兼容的 LiveCharts 版本（推荐 0.9.7）。

2. 绑定不生效：检查DataContext = this;是否执行，属性是否为公共属性（public）。

3. 图表无显示：确保SeriesCollection有数据，且Labels长度与数据点数量匹配。

4. 动画卡顿：大量数据时可关闭动画：chart.DisableAnimations = true;。

六、扩展方向

1. 绑定 MVVM 架构：将SeriesCollection等属性移到 ViewModel 中，实现数据与 UI 分离。

2. 数据导出：结合 Excel 库（如 EPPlus）将图表数据导出为 Excel。

3. 交互增强：添加数据点点击事件、图例隐藏 / 显示、坐标轴缩放等功能。

4. 样式定制：通过Chart.Style或自定义模板修改图表整体样式。