概述：本文代码示例演示了如何在WPF中使用LiveCharts库创建动态条形图。通过创建数据模型、ViewModel和在XAML中使用`CartesianChart`控件，你可以轻松实现图表的数据绑定和动态更新。我将通过清晰的步骤指南包括详细的中文注释，帮助你快速理解并应用这一功能。
先上效果：
在WPF中使用LiveCharts生成动态的条形图表需要以下步骤。以下是详细的实例源代码：
步骤 1: 引用LiveCharts库
首先，在项目中引用LiveCharts库。你可以通过NuGet包管理器来安装LiveCharts.Wpf：
Install-Package LiveCharts.Wpf步骤 2: 创建WPF项目
创建一个新的WPF项目，确保已经在XAML文件中引用了LiveCharts的命名空间：
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"步骤 3: 创建数据模型
创建一个数据模型，用于存储条形图的数据：
// BarChartData.cs
public class BarChartData
{
public string Category { get; set; }
public double Value { get; set; }
}步骤 4: 创建ViewModel
创建一个ViewModel类，用于处理图表的数据和逻辑。在这个类中，你将生成数据并将其绑定到图表控件：
public partial class ViewModel : ViewModelBase
{
private readonly Random _r = new();
private static readonly (string, double)[] s_initialData =
{
("上海", 500),
("北京", 450),
("深圳", 520),
("广州", 550),
("重庆", 660),
("天津", 920),
("成都", 1000)
};
[ObservableProperty]
private ISeries[] _series =
s_initialData
.Select(x => new RowSeries<ObservableValue>
{
Values = new[] { new ObservableValue(x.Item2) },
Name = x.Item1,
Stroke = null,
MaxBarWidth = 25,
DataLabelsPaint = new SolidColorPaint(new SKColor(245, 245, 245)),
DataLabelsPosition = DataLabelsPosition.End,
DataLabelsTranslate = new LvcPoint(-1, 0),
DataLabelsFormatter = point => $"{point.Context.Series.Name} {point.PrimaryValue}"
})
.OrderByDescending(x => ((ObservableValue[])x.Values!)[0].Value)
.ToArray();
[ObservableProperty]
private Axis[] _xAxes = { new Axis { SeparatorsPaint = new SolidColorPaint(new SKColor(220, 220, 220)) } };
[ObservableProperty]
private Axis[] _yAxes = { new Axis { IsVisible = false } };
/// <summary>
/// 动态修改数据,实际项目中读取真实数据
/// </summary>
public void RandomIncrement()
{
foreach (var item in Series)
{
if (item.Values is null) continue;
var i = ((ObservableValue[])item.Values)[0];
i.Value += _r.Next(0, 100);
}
//对新数据重新排序
Series = Series.OrderByDescending(x => ((ObservableValue[])x.Values!)[0].Value).ToArray();
}
}步骤 5: 在XAML中使用图表控件
在XAML中使用LiveCharts的 CartesianChart 控件来显示条形图：
<!-- MainWindow.xaml -->
<Window x:Class="Sample_Charts_Bars.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:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
xmlns:local="clr-namespace:Sample_Charts_Bars"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Title="{Binding Title}"
Series="{Binding Series}"
XAxes="{Binding XAxes}"
YAxes="{Binding YAxes}"
TooltipPosition="Hidden">
</lvc:CartesianChart>
</Grid>
</Window>步骤 6: 在MainWindow中设置DataContext
在MainWindow.xaml.cs中设置ViewModel的DataContext，以便数据绑定：
// MainWindow.xaml.cs
using System.Windows;
namespace YourNamespace
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Update();
}
public async void Update()
{
var vm = (ViewModel)DataContext;
while (true)
{
//更新数据
Application.Current.Dispatcher.Invoke(vm.RandomIncrement);
await Task.Delay(100);
}
}
}
}需要查看更多实例请关注我，后面将逐个发布。
源代码获取：https://pan.baidu.com/s/1EtHg5dvB7ZEQDI9Y3VICpw?pwd=6666
