2023年7月19日发(作者：)

C#之WPF统计图表开发⽅案C# 之 WPF 统计图表开发⽂档⼀、前⾔本项⽬的统计图使⽤LiveCharts 控件集成。LiveCharts, 是⼀款简单，灵活，交互式和强⼤的 DOTNET数据可视化图表控件，内置多种统计图表，可满⾜本项⽬的需求。⼆、环境配置1、开发环境操作系统名称：Microsoft Windows 10 专业⼯作站版IDE名称：Visual Studio 2017 15.9.92、加载 LiveCharts 库这⾥演⽰通过命令⾏（DOTNET的包管理器NuGet）向中央仓库拉取 LiceCharts 库。在控制台键⼊下⾯的命令PM> Install-Package 或者转到解决⽅案资源管理器，右键单击引⽤，然后管理NuGet包浏览，选择包并单击安装3、添加必须的头⽂件将命名空间添加到XAMLxmlns:lvc="clr-namespace:;assembly="在逻辑代码中添加头⽂件using LiveCharts;using ;三、基础图形LiveCharts旨在为⽤户提供便利，⼀切都⾃动更新和动画，库只会在认为有必要时更新，每次数据更改，添加/删除系列或添加/删除图表时都会更新将⾃⼰更新，除了你的业务，你真的不需要担⼼任何事情，让LiveCharts处理图表。1、柱状图（ColumnCharts）将命名空间添加到XAMLxmlns:lvc="clr-namespace:;assembly="在逻辑代码（）中添加头⽂件using LiveCharts;using ;编写界⾯代码 < < < CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Left">>Axis Title="Salesman" Labels="{Binding Labels}"/>>>Axis Title="Sold Apps" LabelFormatter="{Binding Formatter}"/>>CartesianChart> 逻辑代码（为⽅便查漏补缺把所有的代码都贴出来）using LiveCharts;using ;using System;using s;namespace LiveChartsTest{ ///

///

的交互逻辑 ///

public partial class MainWindow : Window { //

构造函数 public MainWindow() { InitializeComponent(); SeriesCollection = new SeriesCollection { new ColumnSeries { Title = "2015", // 2015的条形值 //

动态改变数据只需要更改此处的 Values

便可 Values = new ChartValues { 10, 50, 39, 50 } } }; //adding series will update and animate the chart automatically (new ColumnSeries { Title = "2016", // 2016的条形值 //

动态改变数据只需要更改此处的 Values

便可 Values = new ChartValues { 11, 56, 42 } }); //also adding values updates and animates the chart automatically SeriesCollection[1].(48d); Labels = new[] { "Maria", "Susan", "Charles", "Frida" }; Formatter = value => ng("N"); DataContext = this; } //

图形数据属性 public SeriesCollection SeriesCollection { get; set; } //

标签属性 public string[] Labels { get; set; } // Y轴坐标属性 public Func Formatter { get; set; } }}运⾏效果如下：2、饼状图（PieCharts）因为头⽂件都是⼀样的，这⾥就不贴了，此处有疑问请查看柱状图（LineCharts）直接上XAML代码：

DataClick="Chart_OnDataClick" Hoverable="False" DataTooltip="{x:Null}"> < < < < < PieSeries Title="Maria" Values="3" DataLabels="True"PieSeries Title="Charles" Values="4" DataLabels="True"

PieSeries Title="Frida" Values="6" DataLabels="True"

PieSeries Title="Frederic" Values="2" DataLabels="True"

>PieChart> LabelPoint="{Binding PointLabel}"/> LabelPoint="{Binding PointLabel}"/> LabelPoint="{Binding PointLabel}"/> LabelPoint="{Binding PointLabel}"/>业务逻辑代码//

构造函数 public Pie() { InitializeComponent(); //

⾃定义显⽰标签 PointLabel = chartPoint => ("{0} ({1:P})", chartPoint.Y, ipation); DataContext = this; } //

使⽤泛型动态传⼊数据 public Func PointLabel { get; set; } /** *

饼图⿏标点击事件 */

private void Chart_OnDataClick(object sender, ChartPoint chartpoint) { var chart = (rt)iew; //clear selected slice. foreach (PieSeries series in ) t = 0; var selectedSeries = (PieSeries)View; t = 8; }运⾏效果：3、折线图（LineCharts）XAML⽂件< < < >Axis Title="Sales" LabelFormatter="{Binding YFormatter}">>Axis Title="Month" Labels="{Binding Labels}">CartesianChart>Axis>Axis> 业务逻辑代码//

构造函数public Line(){ InitializeComponent(); SeriesCollection = new SeriesCollection { //

匿名新建LineSeries对象 new LineSeries { //

折线的名称 Title = "Series 1", //

折线的拐点值 Values = new ChartValues { 4, 6, 5, 2 ,4 } }, new LineSeries { Title = "Series 2", Values = new ChartValues { 6, 7, 3, 4 ,6 }, //

折线拐点的表⽰形状，默认为原点 PointGeometry = null }, new LineSeries { Title = "Series 3", Values = new ChartValues { 4,2,7,2,7 }, //

折线拐点的表⽰形状，默认为原点，这⾥是正⽅形 PointGeometry = , //

折线拐点的形状尺⼨ PointGeometrySize = 15 } }; // X轴的坐标值 Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May" }; // Y轴坐标值 YFormatter = value => ng("C"); //modifying the series collection will animate and update the chart //

动态添加折线"Series 4" (new LineSeries { Title = "Series 4", Values = new ChartValues { 5, 3, 2, 4 }, LineSmoothness = 0, //0: straight lines, 1: really smooth lines PointGeometry = ("m 25 70.36218 20 -28 -20 22 -8 -6 z"), PointGeometrySize = 50, //

折线拐点的表⽰形状，默认为原点，这⾥是正⽅形 PointForeground = }); //modifying any series values will also animate and update the chart //

动态为折线"Series 4"添加⼀个值 SeriesCollection[3].(5d); //

数据绑定源

DataContext = this;}//

相关属性public SeriesCollection SeriesCollection { get; set; }public string[] Labels { get; set; }public Func YFormatter { get; set; }效果图：4、散点图（SactterCharts）XAML⽂件< < < >ScatterSeries Title="Series A" Values="{Binding ValuesA}" />ScatterSeries Title="Series B" Values="{Binding ValuesB}" PointGeometry="{x:Static lvc:d}" /> > < >CartesianChart>业务逻辑代码：//

构造函数public Scatter(){ InitializeComponent(); //

使⽤随机数填充三种类型的散点 var r = new Random(); ValuesA = new ChartValues(); ValuesB = new ChartValues(); ValuesC = new ChartValues(); //

赋随机值 for (var i = 0; i < 20; i++) { (new ObservablePoint( uble() * 10, uble() * 10)); (new ObservablePoint( uble() * 10, uble() * 10)); (new ObservablePoint( uble() * 10, uble() * 10)); } //

数据源绑定 DataContext = this;}//

相关属性public ChartValues ValuesA { get; set; }public ChartValues ValuesB { get; set; }public ChartValues ValuesC { get; set; }效果图：5、堆叠图（StackedCharts）对于堆叠图，相⽐之前的统计图⽽⾔，头⽂件有所不同添加到XAML中xmlns:lvc="clr-namespace:;assembly="添加到业务逻辑代码中using LiveCharts;using ts;using ;XAML⽂件：

="2" Series="{Binding SeriesCollection}" LegendLocation="Right"> < < Axis Title="Year" LabelFormatter="{Binding XFormatter}"/>>>Axis Title="Population" LabelFormatter="{Binding YFormatter}"/>>CartesianChart> 业务逻辑代码：public Stacked(){ InitializeComponent(); SeriesCollection = new SeriesCollection { new StackedAreaSeries { Title = "Africa", // Values

描点 Values = new ChartValues { new DateTimePoint(new DateTime(1950, 1, 1), .228), new DateTimePoint(new DateTime(1960, 1, 1), .145), new DateTimePoint(new DateTime(1970, 1, 1), .366), new DateTimePoint(new DateTime(1980, 1, 1), .34), new DateTimePoint(new DateTime(1990, 1, 1), .629), new DateTimePoint(new DateTime(2000, 1, 1), .242), new DateTimePoint(new DateTime(2010, 1, 1), 1.031), new DateTimePoint(new DateTime(2013, 1, 1), 1.110) }, LineSmoothness = 0 }, new StackedAreaSeries { Title = "N & S America", // Values

描点 Values = new ChartValues { new DateTimePoint(new DateTime(1950, 1, 1), .456), new DateTimePoint(new DateTime(1960, 1, 1), .424), new DateTimePoint(new DateTime(1970, 1, 1), .31), new DateTimePoint(new DateTime(1980, 1, 1), 1.618), new DateTimePoint(new DateTime(1990, 1, 1), .247), new DateTimePoint(new DateTime(2000, 1, 1), .81), new DateTimePoint(new DateTime(2010, 1, 1), .942), new DateTimePoint(new DateTime(2013, 1, 1), .432) }, LineSmoothness = 0 }, new StackedAreaSeries { Title = "Asia", // Values

描点 Values = new ChartValues { new DateTimePoint(new DateTime(1950, 1, 1), 0.395), new DateTimePoint(new DateTime(1960, 1, 1), 1.694), new DateTimePoint(new DateTime(1970, 1, 1), 0.128), new DateTimePoint(new DateTime(1980, 1, 1), 1.634), new DateTimePoint(new DateTime(1990, 1, 1), 0.213), new DateTimePoint(new DateTime(2000, 1, 1), 1.717), new DateTimePoint(new DateTime(2010, 1, 1), 0.165), new DateTimePoint(new DateTime(2013, 1, 1), 0.298) }, LineSmoothness = 0 }, new StackedAreaSeries { Title = "Europe", // Values

描点 Values = new ChartValues { new DateTimePoint(new DateTime(1950, 1, 1), .228), new DateTimePoint(new DateTime(1960, 1, 1), .145), new DateTimePoint(new DateTime(1970, 1, 1), .366), new DateTimePoint(new DateTime(1980, 1, 1), .34), new DateTimePoint(new DateTime(1990, 1, 1), .629), new DateTimePoint(new DateTime(2000, 1, 1), .231), new DateTimePoint(new DateTime(2010, 1, 1), .740), new DateTimePoint(new DateTime(2013, 1, 1), .742) }, LineSmoothness = 0 } }; // X、Y坐标 XFormatter = val => new DateTime((long)val).ToString("yyyy"); YFormatter = val => ng("N") + " M"; //

数据绑定 DataContext = this;}//

相关属性public SeriesCollection SeriesCollection { get; set; }public Func XFormatter { get; set; }public Func YFormatter { get; set; }效果图：6、其他（OtherCharts）LiveCharts 还有很多很好看的图表，但是多数的⽤法都是和以上⼏种常见的图表的使⽤⽅式都是⼀样的，剩下的就不重复累赘了，如果想要尝试可以参考上述五种图表。四、总结1、LiveCharts的优势LiveCharts 使⽤简单，快速集成，更加容易的集成在项⽬上。2、LiveCharts的略势LiveCharts 集成简单，但是数据更新是导致整个页⾯都是重新绘制的，更新数据重新刷新界⾯的⽅式对⽤户不太友好，LiveCharts 也有相应的⾃动刷新的控件，可以免费体验15天，但是到期需要付费使⽤。实现图标动态刷新的⽅式还是相对简单粗暴，LiveCharts 内部刷新机制是当 Series、Values等等这个数值发⽣变化时，后台会⾃动触发图标界⾯刷新功能，从⽽重回整个 View。