07 LiveCharts图表

📅 2026/7/22 18:24:15 👁️ 阅读次数 📝 编程学习
07 LiveCharts图表

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

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

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

坐标轴 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,}
};

工具提示 ToolTip

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

  • ​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}" 
/>

image会自动根据配置的数据从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

编程学习 技术分享 实战经验

相关新闻

RTEMS中断处理机制：如何实现高响应性的嵌入式系统

2026/7/22 18:24:15

骑行戴什么耳机合适？2026最适合骑行戴的运动耳机合集来了，码住

2026/7/22 18:24:15

如何用FlyoverKit打造电影级地图动画：5个实用技巧与示例

2026/7/22 18:23:36

最新新闻

椰林海鲜码头企业愿景是什么？坚持正本清源经营，营造健康餐饮环 - MXyuyu

2026/7/22 21:10:33

Jellium Desktop系统资源监控插件：实时跟踪性能指标的终极指南

2026/7/22 21:10:21

杭州2026年GEO优化及AI获客服务公司推荐 - 资讯速览

2026/7/22 21:10:21

2026年上海英国签证办理机构全指南：最新政策、行业乱象与靠谱选择 - 互联网科技品牌测评

2026/7/22 21:10:21

真力时2026年7月广州售后服务中心官方地址及客户服务电话通告 - 亨得利钟表维修中心

2026/7/22 21:10:21

10个ExifToolGui高级技巧：提升照片元数据管理效率

2026/7/22 21:10:21

日新闻

【finetuning】Cohere自定义重排序器案例分析

2026/7/22 0:00:07

远程团队的异步代码评审流程：从阻塞式等待到并行化改进的全记录

2026/7/22 0:00:30

071、STM32Cube.AI工具链介绍与安装

2026/7/22 0:00:30

周新闻

SaaS软件行业GEO实践：AI搜索时代的品牌可见性与获客新路径

2026/7/21 11:37:58

如何高效管理云文件：蓝奏云客户端深度使用指南

2026/7/22 10:20:33

什么是PCTFE？医药高端包装的“防潮王牌“材料

2026/7/21 13:56:00

月新闻

[C++]内存管理：串顺序存储的内存回收

2026/7/21 22:22:44

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

2026/7/21 22:20:43

抖音内容监控助手：告别手动刷新，让优质内容主动找你

2026/7/21 22:43:42