WPFUI LiveCharts使用记录（一）柱状图

前言：LiveCharts是一个图标控件库集，可以实现柱状图、折线图、饼图、仪表盘等图表控件。而且最新版本支持全平台使用，实现的样例展示可以点击查看作者Alberto Rodríguez的 github仓库

1.背景

1.1 新建项目

这篇文章使用的是.NET framework4.7框架作为演示，使用MVVM的方式去绑定后台数据自定义柱状图的展示

1.2 引用NuGet包

2. 定义柱状图

2.1xmal代码

一、添加livecharts的引用

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

二、新建柱状图

	<Grid>
        <lvc:CartesianChart />
    </Grid>
1
2
3

当然现在这样子还是不能满足我们的使用需求。下面对柱状图相关的属性进行讲解，这样子大家可以自定义的去修改自己想要修改的属性。

3. 属性

3.1Series

定义柱状图中可用数据，可以绑定一个或者多个，每个都可以自定义数值、颜色等属性

3.1.1 代码：

xaml：

		<lvc:CartesianChart Series="{Binding Achievement, UpdateSourceTrigger=PropertyChanged}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding StudentNameList}" />
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis />
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
1
2
3
4
5
6
7
8

ViewModel：

    public class MainViewModel
    {
        #region 属性
        private SeriesCollection achievement = new SeriesCollection();
        /// <summary>
        /// 成绩柱状图
        /// </summary>
        public SeriesCollection Achievement
        {
            get { return achievement; }
            set { achievement = value; }
        }

        private List<string> studentNameList;
        /// <summary>
        /// 学生名字
        /// </summary>
        public List<string> StudentNameList
        {
            get { return studentNameList; }
            set { studentNameList = value; }
        }

        #endregion


        #region 方法
        /// <summary>
        /// 成绩初始化
        /// </summary>
        public void Init()
        {
            //名字集合
            StudentNameList = new List<string>()
            {
                "张三",
                "李四",
                "王五",
                "赵六",
                "小明",
            };
            //成绩分数集合
            ChartValues<double> achievement = new ChartValues<double>();
            Random random = new Random();
            for (int i = 0; i < 5; i++)
            {
                achievement.Add(random.Next(60, 100));
            }
            var column = new ColumnSeries();
            column.DataLabels = true;
            column.Title = "成绩";
            column.Values = achievement;
            Achievement.Add(column);
        }
        #endregion
        public MainViewModel()
        {
            Init();
        }

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

3.1.2 备注：

这里的代码直接复制是不能使用的，只是展示的作用，可以到示例代码中直接复制。Series是一个数据的集合类，柱状图的话使用的是ColumnSeries的集合类，下面说一下ColumnSeries使用的属性

3.1.3 ColumnSeries

3.2 LegendLocation

自定义数据标签显示的位置

3.3 ChartLegend

自定义标签的样式，可以修改样式字体大小、字体颜色、字体显示方式等，也可以通过继承的方式，自己自定义相关的类来使用。

代码

<lvc:CartesianChart.ChartLegend>
     <lvc:DefaultLegend />
</lvc:CartesianChart.ChartLegend>
1
2
3

3.4 AxisX

定义X轴的属性

3.4.1 示例代码

 <lvc:CartesianChart.AxisX>
 	<lvc:Axis Labels="{Binding StudentNameList}" Position="LeftBottom"> 
 		<lvc:Axis.Separator>
 			<lvc:Separator Step="1" />
 		</lvc:Axis.Separator>
 	</lvc:Axis>
 </lvc:CartesianChart.AxisX>
1
2
3
4
5
6
7

3.5 AxisY

定义Y轴的属性，和X轴是一致的，这里不做过多的叙述

3.6 Zoom

定义用户可以滚动缩放的方向

3.7 DataTooltip

自定义提示框显示内容

<lvc:CartesianChart.DataTooltip>
    <lvc:DefaultTooltip/>
</lvc:CartesianChart.DataTooltip>
1
2
3

可以通过继承的方式，去自定义显示的内容。需要IChartTooltip接口，实现里面的方法就可以自定义显示的内容了。属性可能需要自行挖掘一下，一般直接的修改是没有办法满足显示的需求的，还是自定义的比较好

4. 示例

xaml：

<Window
    x:Class="LivechartDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:LivechartDemo"
    xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid Margin="20,10">
        <lvc:CartesianChart LegendLocation="Bottom" Series="{Binding Achievement, UpdateSourceTrigger=PropertyChanged}" Zoom="None" >
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding StudentNameList}" Position="LeftBottom"> 
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="1" />
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis />
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.ChartLegend>
                <lvc:DefaultLegend />
            </lvc:CartesianChart.ChartLegend>
            <lvc:CartesianChart.DataTooltip>
                <lvc:DefaultTooltip/>
            </lvc:CartesianChart.DataTooltip>
        </lvc:CartesianChart>
    </Grid>
</Window>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

cs：

using LivechartDemo.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LivechartDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            MainViewModel viewModel = new MainViewModel();
            InitializeComponent();
            this.DataContext = viewModel;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

viewmodel:

using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace LivechartDemo.ViewModels
{
    public class MainViewModel
    {
        #region 属性
        private SeriesCollection achievement = new SeriesCollection();
        /// <summary>
        /// 成绩柱状图
        /// </summary>
        public SeriesCollection Achievement
        {
            get { return achievement; }
            set { achievement = value; }
        }

        private List<string> studentNameList;
        /// <summary>
        /// 学生名字
        /// </summary>
        public List<string> StudentNameList
        {
            get { return studentNameList; }
            set { studentNameList = value; }
        }

        #endregion


        #region 方法
        /// <summary>
        /// 成绩初始化
        /// </summary>
        public void Init()
        {
            //名字集合
            StudentNameList = new List<string>()
            {
                "张三",
                "李四",
                "王五",
                "赵六",
                "小明",
            };
            //成绩分数集合
            ChartValues<double> achievement = new ChartValues<double>();
            Random random = new Random();
            for (int i = 0; i < 5; i++)
            {
                achievement.Add(random.Next(60, 100));
            }
            var column = new ColumnSeries();
            column.DataLabels = true;
            column.LabelsPosition = BarLabelPosition.Perpendicular;
            column.Title = "成绩";
            column.Values = achievement;
            Achievement.Add(column);
        }
        #endregion
        public MainViewModel()
        {
            Init();
        }

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

5.写在最后

使用柱状图的时候，如果有每一列数据都想显示不同的数据和颜色的需求时。提供一个思路，一个数据的集合，每一个数据都是一个ColumnSeries对象，把SharesPosition设置为false，指定对应的填充颜色Fill，把DataLabels 设置成false，然后添加数据集合数量的数值为0的ChartValues 数据，然后在当前数据在数据集中所对应的位置的ChartValues 中数据附上值，这样子就可以只显示一个独立的数值和独立的颜色了。但是DataTooltip要改成自己自定义的。

6. 推荐博客

LiveCharts 系列
WPF LiveChart 图表详解