在C#桌面应用或Web应用开发中，动态生成图表是数据展示的常见需求，LiveCharts作为轻量且功能丰富的图表库，提供了简单易用的API，可快速实现多种图表的动态渲染与更新。本文将以WPF平台为例，演示如何使用LiveCharts动态生成折线图、柱状图和饼图。
环境准备
首先需要在项目中安装LiveCharts相关的NuGet包，打开NuGet包管理器，搜索并安装以下两个包：
- LiveCharts
- LiveCharts.Wpf
基础配置
在WPF的XAML文件中，需要先引入LiveCharts的命名空间，然后添加一个图表容器，这里以CartesianChart为例，用于承载折线图和柱状图：
<Window x:Class="LiveChartsDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
Title="LiveCharts动态图表实战" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="10">
<Button x:Name="btnLine" Content="生成折线图" Margin="5" Click="btnLine_Click"/>
<Button x:Name="btnBar" Content="生成柱状图" Margin="5" Click="btnBar_Click"/>
<Button x:Name="btnPie" Content="生成饼图" Margin="5" Click="btnPie_Click"/>
<Button x:Name="btnUpdate" Content="更新数据" Margin="5" Click="btnUpdate_Click"/>
</StackPanel>
<lvc:CartesianChart x:Name="cartesianChart" Grid.Row="1" Margin="10"/>
<lvc:PieChart x:Name="pieChart" Grid.Row="1" Margin="10" Visibility="Collapsed"/>
<TextBlock Grid.Row="2" Margin="10" Text="点击上方按钮切换图表类型，点击更新数据可刷新当前图表内容"/>
</Grid>
</Window>
动态生成折线图
折线图适合展示数据随时间或序号的变化趋势，下面的代码实现点击按钮后生成动态折线图：
using LiveCharts;
using LiveCharts.Wpf;
using System.Windows;
using System.Windows.Media;
namespace LiveChartsDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
// 生成折线图
private void btnLine_Click(object sender, RoutedEventArgs e)
{
// 显示笛卡尔图表，隐藏饼图
cartesianChart.Visibility = Visibility.Visible;
pieChart.Visibility = Visibility.Collapsed;
// 模拟折线图数据，X轴为1-10的序号，Y轴为随机数值
var lineValues = new ChartValues<double>();
var xLabels = new string[10];
var random = new System.Random();
for (int i = 0; i < 10; i++)
{
lineValues.Add(random.Next(10, 100));
xLabels[i] = $"第{i + 1}项";
}
// 配置折线图系列
var lineSeries = new LineSeries
{
Title = "销量趋势",
Values = lineValues,
PointGeometry = DefaultGeometries.Circle,
PointGeometrySize = 10,
LineSmoothness = 0.5,
Stroke = Brushes.DodgerBlue,
Fill = Brushes.Transparent
};
// 设置图表属性
cartesianChart.Series = new SeriesCollection { lineSeries };
cartesianChart.AxisX.Clear();
cartesianChart.AxisX.Add(new Axis
{
Title = "统计项",
Labels = xLabels
});
cartesianChart.AxisY.Clear();
cartesianChart.AxisY.Add(new Axis
{
Title = "数值",
MinValue = 0
});
}
}
}
动态生成柱状图
柱状图适合对比不同类别数据的大小，实现逻辑与折线图类似，仅需要调整系列类型和样式：
// 生成柱状图
private void btnBar_Click(object sender, RoutedEventArgs e)
{
// 显示笛卡尔图表，隐藏饼图
cartesianChart.Visibility = Visibility.Visible;
pieChart.Visibility = Visibility.Collapsed;
// 模拟柱状图数据
var barValues = new ChartValues<double>();
var xLabels = new string[6];
var random = new System.Random();
for (int i = 0; i < 6; i++)
{
barValues.Add(random.Next(20, 90));
xLabels[i] = $"类别{i + 1}";
}
// 配置柱状图系列
var barSeries = new ColumnSeries
{
Title = "类别数值",
Values = barValues,
Fill = Brushes.Orange,
StrokeThickness = 0
};
// 设置图表属性
cartesianChart.Series = new SeriesCollection { barSeries };
cartesianChart.AxisX.Clear();
cartesianChart.AxisX.Add(new Axis
{
Title = "类别",
Labels = xLabels
});
cartesianChart.AxisY.Clear();
cartesianChart.AxisY.Add(new Axis
{
Title = "数值",
MinValue = 0
});
}
动态生成饼图
饼图适合展示各部分数据占总体的比例，需要使用PieChart控件：
// 生成饼图
private void btnPie_Click(object sender, RoutedEventArgs e)
{
// 隐藏笛卡尔图表，显示饼图
cartesianChart.Visibility = Visibility.Collapsed;
pieChart.Visibility = Visibility.Visible;
// 模拟饼图数据
var pieValues = new ChartValues<double>();
var random = new System.Random();
for (int i = 0; i < 4; i++)
{
pieValues.Add(random.Next(10, 50));
}
// 配置饼图系列
var pieSeries = new PieSeries
{
Title = "占比",
Values = pieValues,
DataLabels = true,
LabelPoint = chartPoint => $"{chartPoint.Y} ({chartPoint.Participation:P2})"
};
// 设置饼图属性
pieChart.Series = new SeriesCollection { pieSeries };
pieChart.LegendLocation = LegendLocation.Right;
}
动态更新图表数据
LiveCharts的ChartValues实现了INotifyPropertyChanged接口，修改集合中的数据会自动刷新图表，实现动态更新：
// 更新当前图表数据
private void btnUpdate_Click(object sender, RoutedEventArgs e)
{
var random = new System.Random();
if (cartesianChart.Visibility == Visibility.Visible)
{
// 更新笛卡尔图表数据
if (cartesianChart.Series.Count > 0)
{
var series = cartesianChart.Series[0];
if (series.Values is ChartValues<double> values)
{
for (int i = 0; i < values.Count; i++)
{
values[i] = random.Next(10, 100);
}
}
}
}
else if (pieChart.Visibility == Visibility.Visible)
{
// 更新饼图数据
if (pieChart.Series.Count > 0)
{
var series = pieChart.Series[0];
if (series.Values is ChartValues<double> values)
{
for (int i = 0; i < values.Count; i++)
{
values[i] = random.Next(10, 50);
}
}
}
}
}
注意事项
- 如果需要展示大量实时数据，建议限制
ChartValues的长度，避免内存占用过高 - 可以通过修改系列的
Fill、Stroke等属性自定义图表颜色样式 - 如果需要支持触摸交互，可以开启LiveCharts内置的缩放、平移功能
C#LiveCharts动态图表数据可视化修改时间：2026-06-19 07:06:29