LiveCharts.Wpf 的使用

本文主要介绍LiveChart.WPF 中的图表的使用方法 类: 数据绑定, 数据显示样式等。

导入LiveChart.Wpf#
NuGet搜索LiveChart包, 安装LiveChart.Wpf即可。


在 XAML 中导入命名空间

xmlns:lvc=“clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf”
基本框架
lvc:CartesianChart

lvc:CartesianChart.AxisX
Axis Title=“” ShowLabels=“” Labels=“” LabelsRotation=“”>
lvc:Axis.Separator

    
        
            
        
        




    
        
        
            
                
                
            
        
    




    

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

lvc:Axis：

MinValue和MaxValue：设置图表显示的数据范围，可以不设置，可以靠 Step 和坐标系数的个数决定
ShowLabels和Labels：是否显示 X 或 Y 轴的系数，Labels 就是坐标系数
LabelsRotation：是坐标轴上系数的旋转角度
Title：坐标轴的标题
lvc:Axis.Separator：

lvc:Separator Step=“”：这个就是设置设置两个坐标系数之间的数据差距
lvc:Separator StrokeDashArray=“”：分割线虚线间隔，一般不设置
lvc:CartesianChart.Series：

DataLabels：是否在坐标上显示具体数据
LabelsPosition：设置DataLabels显示的位置，一般不用写，也不一定有这个属性
Values：数据的集合
柱状图
柱状图的类型是 ColumnSeries

lvc:CartesianChart.AxisX

lvc:Axis.Separator




lvc:CartesianChart.AxisY

lvc:Axis.Separator




lvc:CartesianChart.Series

lvc:ColumnSeries.Fill









折线图
折线图的类型是LineSeries

lvc:CartesianChart.AxisX

lvc:Axis.Separator




lvc:CartesianChart.AxisY

lvc:Axis.Separator




lvc:CartesianChart.Series

lvc:LineSeries.Fill









进度环
进度环的类型是Gauge

lvc:Gauge.GaugeRenderTransform





lvc:Gauge.GaugeActiveFill







InnerRadius：这个是指饼状图中间的圆的半径，0 就是没有
Uses360Mode：是否使用完整的圆，默认是 false ，表示半圆
GaugeBackground：圆环背景颜色
HighFontSize：中间数字大小
From和To：最小值和最大值
RotateTransform：相对于默认情况下的旋转角度
ScaleTransform：大小变换，ScaleX可以为负数，这样旋转方向就会改变，默认顺时针
GaugeActiveFill：填充颜色，可以用渐变色
效果图

饼状图
饼状图的类型是PieChart

lvc:PieChart.Series





效果图

行图的类型是RowSeries，X轴和Y轴的处理方式与柱状图相反

lvc:CartesianChart
lvc:CartesianChart.AxisX

lvc:Axis.Separator




lvc:CartesianChart.AxisY

lvc:Axis.Separator




lvc:CartesianChart.Series



效果图

注意：行图可以生成甘特图，只需要将Values的类型要改成ChartValues，我就懒得写了

柱状堆积图
柱状堆积图的类型是StackedColumnSeries

lvc:CartesianChart
lvc:CartesianChart.AxisX

lvc:Axis.Separator




lvc:CartesianChart.AxisY

lvc:Axis.Separator




lvc:CartesianChart.Series

    
    

    
    

    

1
2
3
4
5
6
7
8

效果图