概述:本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項,你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋,幫助你快速理解並應用這一功能。 先上效果: 在 ...
概述:本文代碼示例演示瞭如何在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