📅 发布时间：2026/7/22 18:24:15

09 LiveCharts图表

LiveCharts是一个简单灵活、交互式以及功能强大的跨平台图表库，支持wpf、winform...应用程序。

快速入门

安装

在应用程序中右键引用，点击管理NuGet程序包，选择浏览，搜索LiveChartsCore.SkiaSharpView.WPF，注意必须勾选包括预发行版选项，否则搜索不到它。然后点击安装即可，此教程以WPF应用为例，其他应用程序参考官方文档，

第一个图表

首先先为图表创建一个容器，用于显示折线、柱...

<Window xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"  // 注意添加命名空间
><Grid><!-- 使用笛卡尔图表（坐标图表） Series  绑定图表的数据--><lvc:CartesianChartSeries="{Binding Series}"   /></Grid>
</Window>

定义数据并进行绑定

public partial class MainWindow : Window
{public MainWindow(){InitializeComponent();this.DataContext = this;}// 定义属性存储图表数据，不管什么数据都实现了  ISeries   接口public ISeries[] Series { get; set; }   = new ISeries[]{   // 创建一个折线数据，存储double数据new LineSeries<double>(){Values = new List<double>(){ 10,20,44,12,41,31.2 },}};
}

配置主题、字体或映射器（可选）

您可以配置 LiveCharts 以添加主题、注册全局字体、启用工具提示或类型的自定义映射器，当您需要非拉丁字体时，您必须注册字体，以便 SkiaShap 可以呈现文本正确，请在应用程序启动时添加以下代码

// App.xaml.cs
using LiveChartsCore; 
using LiveChartsCore.SkiaSharpView; 
using SkiaSharp; public partial class App : Application
{protected override void OnStartup(StartupEventArgs e){base.OnStartup(e);LiveCharts.Configure(config => config // 注册字体//.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('汉')) // <- 中文//.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('あ')) // <- 日语 //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('헬')) // <- 韩语//.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('Ж'))  // <- 俄语//.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('أ'))  // <- 阿拉伯语//.UseRightToLeftSettings() // 弃用从右到左布局); }
}

CartesianChart 笛卡尔坐标图表

该控件是一个“随时可用”的控件，用于使用笛卡尔坐标系创建绘图，首先，您需要做的就是使用 ICartesianSeries 的集合为属性分配

public ISeries[] Series { get; set; }   
= new ISeries[]
{  // LineSeries  定义一个折线数据new LineSeries<double>(){Values = new List<double>(){ 10,20,44,12,41,31.2 },},// ColumnSeries   定义一个柱状数据new ColumnSeries<double>(){Values = new List<double>() {22,3,52,4,23,12}}
};

<lvc:CartesianChartSeries="{Binding Series}">
</lvc:CartesianChart>

笛卡尔坐标图表主要包含Series系列、Axes轴、Tooltip工具提示、Legend图例

缩放和平移

默认情况下，它是禁用的，要启用它，您必须设置该属性。ZoomMode

<lvc:CartesianChartSeries="{Binding Series}"ZoomMode="X"> 
</lvc:CartesianChart>

AnimationsSpeed 属性

定义所有图表元素（轴、系列、截面）的动画速度。

<lvc:CartesianChartSeries="{Binding Series}"AnimationsSpeed="00:00:00.500"> <!-- 500 milliseconds --> 
</lvc:CartesianChart>

禁用动画

<lvc:CartesianChartEasingFunction="{x:Null}"> 
</lvc:CartesianChart>

图表边距

定义从轴（如果没有轴，则为图表边缘）到绘制边距区域的距离。

public LiveChartsCore.Measure.Margin ChartMargin { get; set; } = new LiveChartsCore.Measure.Margin(100);

<lvc:CartesianChartSeries="{Binding Series}"DrawMargin="{Binding ChartMargin}"> 
</lvc:CartesianChart>

控件容器样式

DrawMarginFrame控制图表容器的样式，可以设置背景和边框

public DrawMarginFrame DrawMarginFrame => new DrawMarginFrame()
{Fill = new SolidColorPaint(SKColors.Pink),  // 背景Stroke = new SolidColorPaint(SKColors.Red)  // 边框{StrokeThickness = 3,    // 宽度PathEffect = new DashEffect(new float[] { 3, 3 })   // 虚线},
};

<lvc:CartesianChartSeries="{Binding Series}"   DrawMarginFrame="{Binding DrawMarginFrame}"
/>

系列 Series

库中有多个系列可用，您可以添加一个或将它们全部混合在同一个图表中，每个系列都有独特的属性，下面的任何图像都是指向解释有关它们的更多信息的文章的链接。

线系列 立柱系列 Scatter 系列 阶梯线系列 加热系列 烛台系列 堆叠线系列 叠层立柱系列 堆叠式台阶线箱体系列 误差序列 泡泡系列

坐标轴 Axes

笛卡尔坐标有两个轴，不仅用于控制标签格式、分隔符、颜色，还可以控制如缩放、平移、分页等功能，详情查看，下面是对坐标轴的简单演示

name 坐标轴名称
NamePaint坐标轴名称样式
LabelsPaint坐标轴文本样式
TextSize文本大小
Labels坐标轴文本
SeparatorsPaint分割线样式

public Axis[] XAxes { get; set; } = new Axis[]
{new Axis(){Name = "横坐标",   // 坐标名称NamePaint = new SolidColorPaint(SKColors.Red),  // 坐标名称颜色LabelsPaint = new SolidColorPaint(new SKColor(190, 75, 219)),   // 坐标文本颜色TextSize = 18,  // 坐标文字大小Labels = new string[]{"衣服", "裤子", "鞋子", "袜子", "帽子", "围巾" }  // 坐标文本列表}
};
public Axis[] YAxes { get; set; } = new Axis[]
{new Axis(){Name = "纵坐标",// 分割线绘制SeparatorsPaint = new SolidColorPaint(SKColors.Yellow)  // 颜色{StrokeThickness = 4,        // 线条粗细PathEffect = new DashEffect(new float[]{ 3, 20 })   // 设置虚线间隔，3px线 20px白},// 最大值MaxLimit = 100,// 最小值MinLimit = 10,// 每个格子间隔的数值MinStep = 10,}
};

工具提示是帮助用户在指针移动时阅读图表的弹出窗口。

TooltipPosition 控制弹窗的位置，设置为Hidden则不显示弹窗

<lvc:CartesianChartSeries="{Binding Series}"TooltipPosition="Top">
</lvc:CartesianChart>

工具提示自定义文本

可以使用XToolTipLabelFormatter或YToolTipLabelFormatter自定义提示弹窗的文本，接收一个委托Series.TooltipLabelFormatterFunc<ChartPoint, string>

默认情况下，库已经为每个系列定义了一个默认值，所有系列都有不同的格式化程序

new LineSeries<double>
{Name = "Sales",Values = new ObservableCollection<double> { 200, 558, 458 },TooltipLabelFormatter =(chartPoint) => $"{chartPoint.Context.Series.Name}: {chartPoint.PrimaryValue}"
},new ColumnSeries<double>
{Name = "Sales 2",Values = new ObservableCollection<double> { 250, 350, 240 },// 以货币的形式展示提示文本// result: Sales 2: $200.00TooltipLabelFormatter =(chartPoint) => $"{chartPoint.Context.Series.Name}: {chartPoint.PrimaryValue:C2}"
},

图例 Legend

图例是一种视觉元素，它以图表的形式显示一个列表，其中包含该系列的名称、描边和填充：

LegendPosition 控制图例的位置，Hidden表示禁用图例

<lvc:CartesianChartSeries="{Binding Series}"   LegendPosition="Right"
/>

PieChart 饼图

饼状图，通常用于表示某个数据在数据中的占比，分为饼图、环形图、仪表图

public ISeries[] Series => new ISeries[]
{new PieSeries<double> { Values = new double[] { 2 }, Name="吃饭" },new PieSeries<double> { Values = new double[] { 4 }, Name="睡觉" },new PieSeries<double> { Values = new double[] { 1 }, Name="买菜" },new PieSeries<double> { Values = new double[] { 4 }, Name="洗澡" },new PieSeries<double> { Values = new double[] { 3 }, Name="抽烟" }
};

<lvc:PieChartSeries="{Binding Series}" 
/>

会自动根据配置的数据从0°开始顺时针绘制图表

InitialRotation 绘制第一个切片的角度
MaxAngle 确定图表的完整角度（以度为单位），默认值为 360。
AnimationsSpeed 动画速度，和笛卡尔图相同
Stroke 边框
Fill 填充色
Pushout 控件中心与饼图切片之间的距离
InnerRadius 切片的内半径（以像素为单位），对于创建圆环图很有用

饼图文本

使用DataLabels相关属性设置饼图上显示的文本相关信息

DataLabelsPosition 文本显示位置
DataLabelsFormatter 文本显示内容
DataLabelsPaint 文本显示颜色
DataLabelsSize 文本显示大小

new PieSeries<int>{ Values = new int[]{12}, Name="吃饭",DataLabelsPosition = PolarLabelsPosition.Middle, DataLabelsFormatter = point => point.Context.Series.Name + point.Context.DataSource,DataLabelsPaint = new SolidColorPaint(SKColors.Black),DataLabelsSize = 22, 
}

极坐标图

极坐标图表用于显示类似雷达图的图表

快速使用

public ISeries[] Series2 { get; set; } = new ISeries[]
{new PolarLineSeries<int>{Values = new int[]{10,20,30,40,50,60},IsClosed = false,}
};

<lvc:PolarChartSeries="{Binding Series2}"
/>

PolarLineSeries常用属性

Values 指定数据值
IsClosed 是否闭合数据线
Fill 填充样式
GeometryFill 标记点填充色
GeometryStroke 标记点描边色
GeometrySize 标记点大小
LineSmoothness 确定序列线是直线还是曲线，其中 0 是直线，1 是最弯曲的线

PolarChart常用属性

InitialRotation 初始角度
InnerRadius 内环半径
TotalAngle 展示数据的角度
RadiusAxes 一圈一圈的线样式
- IPolarAxis[] 类型
- TextSize 文本大小
- LabelsPaint 文本颜色
- SeparatorsPaint 线条样式
- IsVisible 是否显示
- Labels 显示的文本
AngleAxes 分割线的样式（米字形的），数据值类型和RadiusAxes相同

动态图表

使用图表经常会有需要动态的添加或者修改数据的情况，使用liveCharts，我们只需要操作数据，图表将会自动进行更新，如下，点击按钮后图表的颜色和名字都将发生变化

public MainWindow()
{InitializeComponent();this.DataContext = this;Series.Add(columnSeries);
}
ColumnSeries<int> columnSeries = new ColumnSeries<int>
{Values = new List<int> { 10, 2, 3, 4, 5, 6 },Name = "销量",
};
private void Button_Click(object sender, RoutedEventArgs e)
{columnSeries.Name = "测试修改";columnSeries.Fill = new SolidColorPaint(SKColors.Gold);
}

但是，同样的写法并不能在添加数据时生效，如下代码中向Values添加数据，图表不会发生更新

(columnSeries.Values as List<int>).Add(20);

因为LiveCharts 更改检测基于INotifyPropertyChanged和INotifyCollectionChanged接口，两者均由 .Net 框架提供，每次属性或集合发生更改并且对象实现任何这些接口时，图表都会限制更新，而List没有实现这个接口，因此需要使用已经实现了该接口的类将需要更新的数据进行包裹，仅此而已。

代码如下，仅仅需要将Values属性的值由List<int>修改为ObservableCollection<int>即可，十分方便

ColumnSeries<int> columnSeries = new ColumnSeries<int>
{Values = new ObservableCollection<int> { 10, 2, 3, 4, 5, 6 },Name = "销量",
};
private void Button_Click(object sender, RoutedEventArgs e)
{(columnSeries.Values as ObservableCollection<int>).Add(20);
}

饼图数据的添加如下所示

public ObservableCollection<ISeries> Series1 { get; set; } = new ObservableCollection<ISeries>()
{new PieSeries<int>{ Values = new int[]{12}, Name="吃饭" },new PieSeries<int>{ Values = new int[]{22}, Name="睡觉" },new PieSeries<int>{ Values = new int[]{15}, Name="喝水" },
};
private void Button_Click(object sender, RoutedEventArgs e)
{Series1.Add(new PieSeries<int> { Values = new int[] { 23 }, Name = "旅游" });
}

简而言之，如果修改非枚举类型，直接修改即可，如果是可枚举类型，需要使用ObservableCollection类而不是List或者Array

07 LiveCharts图表