C# 之 WPF 统计图表开发方案

C# 之 WPF 统计图表开发文档

一、前言
二、环境配置
- 1、开发环境
- 2、加载 LiveCharts 库
- 3、添加必须的头文件
三、基础图形
- 1、柱状图（ColumnCharts）
- 2、饼状图（PieCharts）
- 3、折线图（LineCharts）
- 4、散点图（SactterCharts）
- 5、堆叠图（StackedCharts）
- 6、其他（OtherCharts）
四、总结
- 1、LiveCharts的优势
- 2、LiveCharts的略势

一、前言

本项目的统计图使用LiveCharts 控件集成。
LiveCharts, 官网：https://lvcharts.net 是一款简单，灵活，交互式和强大的 DOTNET数据可视化图表控件，内置多种统计图表，可满足本项目的需求。

二、环境配置

1、开发环境

操作系统名称：Microsoft Windows 10 专业工作站版
IDE名称：Visual Studio 2017 15.9.9

2、加载 LiveCharts 库

这里演示通过命令行（DOTNET的包管理器NuGet）向中央仓库拉取 LiceCharts 库。

在控制台键入下面的命令

PM> Install-Package LiveCharts.Wpf

或者转到解决方案资源管理器，右键单击引用，然后管理NuGet包
浏览LiveCharts.Wpf，选择包并单击安装

3、添加必须的头文件

将命名空间添加到XAML

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

在逻辑代码中添加头文件

using LiveCharts;
using LiveCharts.Wpf;

三、基础图形

LiveCharts旨在为用户提供便利，一切都自动更新和动画，库只会在认为有必要时更新，每次数据更改，添加/删除系列或添加/删除图表时都会更新将自己更新，除了你的业务，你真的不需要担心任何事情，让LiveCharts处理图表。

有许多类型已准备好已定义的绘图，您可以在 LiveCharts 官网(https://lvcharts.net)了解更多信息，下面介绍几种常用的图表视图绘制。

1、柱状图（ColumnCharts）

将命名空间添加到XAML

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

在逻辑代码（MainWindows.xaml.cs）中添加头文件

using LiveCharts;
using LiveCharts.Wpf;

编写界面代码

<Grid><!--SeriesCollection 为柱状数据--><lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Left"><lvc:CartesianChart.AxisX><!--Labels 为图形标签数据--><lvc:Axis Title="Salesman" Labels="{Binding Labels}"/></lvc:CartesianChart.AxisX><lvc:CartesianChart.AxisY><!--Formatter 为Y轴单位--><lvc:Axis Title="Sold Apps" LabelFormatter="{Binding Formatter}"/></lvc:CartesianChart.AxisY></lvc:CartesianChart>
</Grid>

逻辑代码（为方便查漏补缺把所有的代码都贴出来）

using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Windows;namespace LiveChartsTest
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{// 构造函数public MainWindow(){InitializeComponent();SeriesCollection = new SeriesCollection{new ColumnSeries{Title = "2015",// 2015的条形值// 动态改变数据只需要更改此处的 Values 便可Values = new ChartValues<double> { 10, 50, 39, 50 }}};//adding series will update and animate the chart automaticallySeriesCollection.Add(new ColumnSeries{Title = "2016",// 2016的条形值// 动态改变数据只需要更改此处的 Values 便可Values = new ChartValues<double> { 11, 56, 42 }});//also adding values updates and animates the chart automaticallySeriesCollection[1].Values.Add(48d);Labels = new[] { "Maria", "Susan", "Charles", "Frida" };Formatter = value => value.ToString("N");DataContext = this;}// 图形数据属性public SeriesCollection SeriesCollection { get; set; }// 标签属性public string[] Labels { get; set; }// Y轴坐标属性public Func<double, string> Formatter { get; set; }}
}

运行效果如下：

2、饼状图（PieCharts）

因为头文件都是一样的，这里就不贴了，此处有疑问请查看柱状图（LineCharts）
直接上XAML代码：

<lvc:PieChart LegendLocation="Bottom" DataClick="Chart_OnDataClick" Hoverable="False" DataTooltip="{x:Null}"><lvc:PieChart.Series><!--DataLabels属性是显示模块标签的、PointLabel是占比--><lvc:PieSeries Title="Maria" Values="3" DataLabels="True"LabelPoint="{Binding PointLabel}"/><lvc:PieSeries Title="Charles" Values="4" DataLabels="True" LabelPoint="{Binding PointLabel}"/><lvc:PieSeries Title="Frida" Values="6" DataLabels="True" LabelPoint="{Binding PointLabel}"/><lvc:PieSeries Title="Frederic" Values="2" DataLabels="True" LabelPoint="{Binding PointLabel}"/></lvc:PieChart.Series>
</lvc:PieChart>

业务逻辑代码

// 构造函数public Pie(){InitializeComponent();// 自定义显示标签PointLabel = chartPoint =>string.Format("{0} ({1:P})", chartPoint.Y, chartPoint.Participation);DataContext = this;}// 使用泛型动态传入数据public Func<ChartPoint, string> PointLabel { get; set; }/***  饼图鼠标点击事件*/ private void Chart_OnDataClick(object sender, ChartPoint chartpoint){var chart = (LiveCharts.Wpf.PieChart)chartpoint.ChartView;//clear selected slice.foreach (PieSeries series in chart.Series)series.PushOut = 0;var selectedSeries = (PieSeries)chartpoint.SeriesView;selectedSeries.PushOut = 8;}

运行效果：

3、折线图（LineCharts）

XAML文件

<!--LegendLocation 表示图例的位置在右边-->
<lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" ><lvc:CartesianChart.AxisY><!-- YFormatter Y轴坐标值--><lvc:Axis Title="Sales" LabelFormatter="{Binding YFormatter}"></lvc:Axis></lvc:CartesianChart.AxisY><lvc:CartesianChart.AxisX><!-- Labels X轴坐标值--><lvc:Axis Title="Month" Labels="{Binding Labels}"></lvc:Axis></lvc:CartesianChart.AxisX>
</lvc:CartesianChart>

业务逻辑代码

// 构造函数
public Line()
{InitializeComponent();SeriesCollection = new SeriesCollection{// 匿名新建LineSeries对象new LineSeries{// 折线的名称Title = "Series 1",// 折线的拐点值Values = new ChartValues<double> { 4, 6, 5, 2 ,4 }},new LineSeries{Title = "Series 2",Values = new ChartValues<double> { 6, 7, 3, 4 ,6 },// 折线拐点的表示形状，默认为原点PointGeometry = null},new LineSeries{Title = "Series 3",Values = new ChartValues<double> { 4,2,7,2,7 },// 折线拐点的表示形状，默认为原点，这里是正方形PointGeometry = DefaultGeometries.Square,// 折线拐点的形状尺寸PointGeometrySize = 15}};// X轴的坐标值Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May" };// Y轴坐标值YFormatter = value => value.ToString("C");//modifying the series collection will animate and update the chart// 动态添加折线"Series 4"SeriesCollection.Add(new LineSeries{Title = "Series 4",Values = new ChartValues<double> { 5, 3, 2, 4 },LineSmoothness = 0, //0: straight lines, 1: really smooth linesPointGeometry = Geometry.Parse("m 25 70.36218 20 -28 -20 22 -8 -6 z"),PointGeometrySize = 50,// 折线拐点的表示形状，默认为原点，这里是正方形PointForeground = Brushes.Gray});//modifying any series values will also animate and update the chart// 动态为折线"Series 4"添加一个值SeriesCollection[3].Values.Add(5d);// 数据绑定源 DataContext = this;
}// 相关属性
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> YFormatter { get; set; }

效果图：

4、散点图（SactterCharts）

XAML文件

<!--LegendLocation 表示图例位置-->
<lvc:CartesianChart Grid.Row="1" LegendLocation="Bottom"><lvc:CartesianChart.Series><!--Values 表示 A\B\C 的散点图值--><lvc:ScatterSeries Title="Series A" Values="{Binding ValuesA}" /><!--PointGeometry表示散点的形状--><lvc:ScatterSeries Title="Series B" Values="{Binding ValuesB}"PointGeometry="{x:Static lvc:DefaultGeometries.Diamond}" /><!--StrokeThickness 表示散点形状大小--><!--Fill 表示填充内容--><lvc:ScatterSeries Title="Series C" Values="{Binding ValuesC}"PointGeometry="{x:Static lvc:DefaultGeometries.Triangle}"StrokeThickness="2" Fill="Transparent"/></lvc:CartesianChart.Series><lvc:CartesianChart.AxisY><!--setting the axis unit improved the labels rounding rule--><!--Unit 表示坐标的密度单元--><lvc:Axis Unit="1"></lvc:Axis></lvc:CartesianChart.AxisY>
</lvc:CartesianChart>

业务逻辑代码：

// 构造函数
public Scatter()
{InitializeComponent();// 使用随机数填充三种类型的散点var r = new Random();ValuesA = new ChartValues<ObservablePoint>();ValuesB = new ChartValues<ObservablePoint>();ValuesC = new ChartValues<ObservablePoint>();// 赋随机值for (var i = 0; i < 20; i++){ValuesA.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));ValuesB.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));ValuesC.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));}// 数据源绑定DataContext = this;
}// 相关属性
public ChartValues<ObservablePoint> ValuesA { get; set; }
public ChartValues<ObservablePoint> ValuesB { get; set; }
public ChartValues<ObservablePoint> ValuesC { get; set; }

效果图：

5、堆叠图（StackedCharts）

对于堆叠图，相比之前的统计图而言，头文件有所不同
添加到XAML中

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

添加到业务逻辑代码中

using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;

XAML文件：

<!--通过SeriesCollection加载堆叠图，LegendLocation表图例-->
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}"  LegendLocation="Right"><lvc:CartesianChart.AxisX><!--X轴坐标值--><lvc:Axis Title="Year" LabelFormatter="{Binding XFormatter}"/></lvc:CartesianChart.AxisX><lvc:CartesianChart.AxisY><!--Y轴坐标值--><lvc:Axis Title="Population" LabelFormatter="{Binding YFormatter}"/></lvc:CartesianChart.AxisY>
</lvc:CartesianChart>

业务逻辑代码：

public Stacked()
{InitializeComponent();SeriesCollection = new SeriesCollection{new StackedAreaSeries{Title = "Africa",// Values 描点Values = new ChartValues<DateTimePoint>{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<DateTimePoint>{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<DateTimePoint>{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<DateTimePoint>{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 => val.ToString("N") + " M";// 数据绑定DataContext = this;
}// 相关属性
public SeriesCollection SeriesCollection { get; set; }
public Func<double, string> XFormatter { get; set; }
public Func<double, string> YFormatter { get; set; }

效果图：

6、其他（OtherCharts）

LiveCharts 还有很多很好看的图表，但是多数的用法都是和以上几种常见的图表的使用方式都是一样的，剩下的就不重复累赘了，如果想要尝试可以参考上述五种图表。

四、总结

1、LiveCharts的优势

LiveCharts 使用简单，快速集成，更加容易的集成在项目上。

2、LiveCharts的略势

LiveCharts 集成简单，但是数据更新是导致整个页面都是重新绘制的，更新数据重新刷新界面的方式对用户不太友好，LiveCharts 也有相应的自动刷新的控件，可以免费体验15天，但是到期需要付费使用。
实现图标动态刷新的方式还是相对简单粗暴，LiveCharts 内部刷新机制是当 Series、Values等等这个数值发生变化时，后台会自动触发图标界面刷新功能，从而重回整个 View。

C# 之 WPF 统计图表开发方案相关推荐

WPF学习开发客户端软件-任务助手(下 2015年2月4日代码更新)
时光如梭,距离第一次写的 WPF学习开发客户端软件-任务助手(已上传源码) 已有三个多月,期间我断断续续地对该项目做了优化.完善等等工作,现在重新向大家介绍一下,希望各位可以使用,本软件以实用性为主 ...
WPF Multi-Touch 开发：高级触屏操作（Manipulation）
在上一篇中我们对基础触控操作有了初步了解,本篇将继续介绍触碰控制的高级操作(Manipulation),在高级操作中包含了一些特殊的触屏手势:平移.缩放.旋转,当然在WPF 中无需自行开发这些手势,只 ...
WPF Multi-Touch 开发：惯性效果（Inertia）
从上一篇实例可以发现在图片移动过程中如果将手指移开屏幕则图片会立刻停止,根据这种情况WPF 提供另外一种惯性效果(Inertia).通过它可以使UI 单元移动的更加符合物理特性.更为实际和流畅. 在前 ...
WPF 4 开发Windows 7 跳转列表（JumpList）
原文:WPF 4 开发Windows 7 跳转列表(JumpList) 在之前写过的<Windows 7 任务栏开发系列>中我们通过Visual Studio 2008 借助微软提供的Wi ...
WPF PRISM开发入门一( 初始化PRISM WPF程序)
原文:WPF PRISM开发入门一( 初始化PRISM WPF程序) 这篇博客将介绍在WPF项目中引入PRISM框架进行开发的一些基础知识.目前最新的PRISM的版本是Prism 6.1.0,可以在G ...
EtherCAT伺服驱动器-如何选择硬件开发方案
EtherCAT伺服驱动器-如何选择硬件开发方案
前端工程化开发方案app-proto
什么是前端工程化?根据具体的业务特点,将前端的开发流程.技术.工具.经验等规范化.标准化就是前端工程化.它的目的是让前端开发能够"自成体系",最大程度地提高前端工程师的开发效率,降 ...
C++开发WPF，开发环境配置
C++开发WPF,开发环境配置操作系统:Windows XP SP2, Windwos Vista 开发工具:Visual Studio 2005,Expression Blend SDK:.NET ...
流言终结者- Flutter和RN谁才是更好的跨端开发方案？
背景论坛上很多小伙伴关心为什么闲鱼选择了Flutter而不选择其他跨端方案?站在质量的角度,高性能是一个很重的因素,我们使用Flutter重写了宝贝详情页之后,对比了Flutter和Native详情 ...

C# 之 WPF 统计图表开发方案

C# 之 WPF 统计图表开发文档

一、前言

二、环境配置

1、开发环境

2、加载 LiveCharts 库

3、添加必须的头文件

三、基础图形

1、柱状图（ColumnCharts）

2、饼状图（PieCharts）

3、折线图（LineCharts）

4、散点图（SactterCharts）

5、堆叠图（StackedCharts）

6、其他（OtherCharts）

四、总结

1、LiveCharts的优势

2、LiveCharts的略势

C# 之 WPF 统计图表开发方案相关推荐

最新文章

热门文章