WPF—LiveCharts图表
LiveCharts是一个简单灵活、交互式以及功能强大的跨平台图表库，支持wpf、winform...应用程序。
LiveCharts图表
LiveCharts是一个简单灵活、交互式以及功能强大的跨平台图表库，支持wpf、winform...应用程序。
快速入门
安装
在应用程序中右键`引用`，点击`管理NuGet程序包`，选择`浏览`，搜索`LiveChartsCore.SkiaSharpView.WPF`，注意必须勾选`包括预发行版`选项，否则搜索不到它。然后点击安装即可，此教程以WPF应用为例，其他应用程序参考官方文档，
第一个图表
首先先为图表创建一个容器，用于显示折线、柱...
<Window
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF" // 注意添加命名空间
>
<Grid>
<!-- 使用笛卡尔图表（坐标图表）
Series 绑定图表的数据
-->
<lvc:CartesianChart
Series="{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:CartesianChart
Series="{Binding Series}">
</lvc:CartesianChart>笛卡尔坐标图表主要包含Series系列、Axes轴、Tooltip工具提示、Legend图例
缩放和平移
默认情况下，它是禁用的，要启用它，您必须设置该属性。`ZoomMode`
<lvc:CartesianChart
Series="{Binding Series}"
ZoomMode="X">
</lvc:CartesianChart>AnimationsSpeed 属性
定义所有图表元素（轴、系列、截面）的动画速度。
<lvc:CartesianChart
Series="{Binding Series}"
AnimationsSpeed="00:00:00.500"> <!-- 500 milliseconds -->
</lvc:CartesianChart>禁用动画
<lvc:CartesianChart
EasingFunction="{x:Null}">
</lvc:CartesianChart>图表边距
定义从轴（如果没有轴，则为图表边缘）到绘制边距区域的距离。
public LiveChartsCore.Measure.Margin ChartMargin { get; set; } = new LiveChartsCore.Measure.Margin(100); <lvc:CartesianChart
Series="{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:CartesianChart
Series="{Binding Series}"
DrawMarginFrame="{Binding DrawMarginFrame}"
/>系列 Series
库中有多个系列可用，您可以添加一个或将它们全部混合在同一个图表中，每个系列都有独特的属性， 下面的任何图像都是指向解释有关它们的更多信息的文章的链接。
坐标轴 Axes
笛卡尔坐标有两个轴，不仅用于控制标签格式、分隔符、颜色，还可以控制如缩放、平移、分页等功能，[详情查看](https://livecharts.dev/docs/wpf/2.0.0-rc2/CartesianChart.Axes%20properties)，下面是对坐标轴的简单演示
* `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:CartesianChart
Series="{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.00
TooltipLabelFormatter =
(chartPoint) => $"{chartPoint.Context.Series.Name}: {chartPoint.PrimaryValue:C2}"
},图例 Legend
[图例]是一种视觉元素，它以图表的形式显示一个列表，其中包含该系列的名称、描边和填充：
* `LegendPosition` 控制图例的位置，`Hidden`表示禁用图例
<lvc:CartesianChart
Series="{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:PieChart
Series="{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:PolarChart
Series="{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`本篇文章来源网络，如有侵权请联系删除！！！！
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
68
0- 0
已为社区贡献6条内容
所有评论(0)