LiveCharts是一款非常好用的WPF图表绘制类库，相比其他同类类库，LiveCharts的UI风格样式更加多样更加美观。

准备工作：安装以下两个类库：

1、甘特图

前台View代码

1 2 3 4 8 9 10 11 12 13 14 15 16 18 19 20 21 22 23 24 25 26 28 29

Gantt Chart xaml

后台ViewModel代码

1 private double _from;
2 private double _to;
3 private Func _formatter;
4 private string[] _labels;
5 private ChartValues _values;
6 public double From { get { return _from; } set { _from = value; NotifyOfPropertyChange(() => From); } }
7 public double To { get { return _to; } set { _to = value; NotifyOfPropertyChange(() => To); } }
8 public Func Formatter { get { return _formatter; } set { _formatter = value; NotifyOfPropertyChange(() => Formatter); } }
9 public string[] Labels { get { return _labels; } set { _labels = value; NotifyOfPropertyChange(() => Labels); } }
10 public ChartValues Values { get { return _values; } set { _values = value; NotifyOfPropertyChange(() => Values); } }
11
12 public void ShowGanttChart()
13 {
14 var now = DateTime.Now;
15
16 Values = new ChartValues
17 {
18 new GanttPoint(now.Ticks, now.AddSeconds(2).Ticks),
19 new GanttPoint(now.AddSeconds(1).Ticks, now.AddSeconds(3).Ticks),
20 new GanttPoint(now.AddSeconds(3).Ticks, now.AddSeconds(5).Ticks),
21 new GanttPoint(now.AddSeconds(5).Ticks, now.AddSeconds(8).Ticks),
22 new GanttPoint(now.AddSeconds(6).Ticks, now.AddSeconds(10).Ticks)
23 };
24
25 Formatter = value => new DateTime((long)value).ToString("MM-dd HH:mm:ss");
26
27 Labels = new[]
28 {
29 "原材料出库", "智能装配","个性化定制", "智能包装", "智能仓储"
30 };
31 From = _values.First().StartPoint;
32 To = _values.Last().EndPoint;
33 }

Gantt Chart cs

效果图

2、进度环

前台View代码

1
2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Gauge xaml

后台ViewModel代码

1 private double _orderProgress;
2 public double OrderProgress { get { return _orderProgress; } set { _orderProgress = value; NotifyOfPropertyChange(() => OrderProgress); } }
3
4 private void ShowGauge()
5 {
6 OrderProgress = 90;
7 }

Gauge cs

效果图

3、柱状堆积图

前台View代码

1
2
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 24 25 28 29 32 33 34 35 36 37 38

StackedColumn xaml

后台ViewModel代码

1 private string[] _labels;
2 private IChartValues _v1;
3 private IChartValues _v2;
4 private IChartValues _v3;
5 public IChartValues V1 { get { return _v1; } set { _v1 = value; NotifyOfPropertyChange(() => V1); } }
6 public IChartValues V2 { get { return _v2; } set { _v2 = value; NotifyOfPropertyChange(() => V2); } }
7 public IChartValues V3 { get { return _v3; } set { _v3 = value; NotifyOfPropertyChange(() => V3); } }
8 public string[] Labels { get { return _labels; } set { _labels = value; NotifyOfPropertyChange(() => Labels); } }
9 private void ShowStackedColumn()
10 {
11 V1 = new ChartValues
12 {
13 new ObservableValue(5),
14 new ObservableValue(8),
15 new ObservableValue(2),
16 new ObservableValue(4),
17 new ObservableValue(6),
18 new ObservableValue(2),
19 new ObservableValue(9),
20 new ObservableValue(4),
21 new ObservableValue(6),
22 new ObservableValue(2),
23 new ObservableValue(9),
24 new ObservableValue(3)
25 };
26 V2 = new ChartValues
27 {
28 new ObservableValue(5),
29 new ObservableValue(8),
30 new ObservableValue(2),
31 new ObservableValue(4),
32 new ObservableValue(6),
33 new ObservableValue(2),
34 new ObservableValue(9),
35 new ObservableValue(4),
36 new ObservableValue(6),
37 new ObservableValue(2),
38 new ObservableValue(9),
39 new ObservableValue(3)
40 };
41 V3 = new ChartValues
42 {
43 new ObservableValue(5),
44 new ObservableValue(8),
45 new ObservableValue(2),
46 new ObservableValue(4),
47 new ObservableValue(6),
48 new ObservableValue(2),
49 new ObservableValue(9),
50 new ObservableValue(4),
51 new ObservableValue(6),
52 new ObservableValue(2),
53 new ObservableValue(9),
54 new ObservableValue(3)
55 };
56
57 Labels = new[]
58 {
59 "1月", "2月","3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"
60 };
61 }

StackedColumn cs

效果图

4、饼状图

前台代码

1
2
3 4 5 6 7 8 9 10 11 12 13

Pie xaml

效果图

或者：

前台代码

1 3 4 5 6

Pie2 xaml

后台代码

1 private SeriesCollection _orderCountSeries;
2 public SeriesCollection OrderCountSeries { get { return _orderCountSeries; } set { _orderCountSeries = value; NotifyOfPropertyChange(() => OrderCountSeries); } }
3 public ObservableValue OrangeOrderCount { get; set; } = new ObservableValue();
4 public ObservableValue AppleOrderCount { get; set; } = new ObservableValue();
5 public ObservableValue PearOrderCount { get; set; } = new ObservableValue();
6
7 private void InitializeChartSeries()
8 {
9 OrderCountSeries = new SeriesCollection
10 {
11 new PieSeries
12 {
13 Title = "橙 汁 Orange",
14 Values = new ChartValues { new ObservableValue() },
15 DataLabels = true,
16 FontSize = 28
17 },
18 new PieSeries
19 {
20 Title = "苹果汁 Apple",
21 Values = new ChartValues { new ObservableValue() },
22 DataLabels = true,
23 FontSize = 28
24 },
25 new PieSeries
26 {
27 Title = "梨 汁 Pear",
28 Values = new ChartValues { new ObservableValue() },
29 DataLabels = true,
30 FontSize = 28
31 }
32 };
33 }
34
35 private void UpdateChartSeries()
36 {
37 OrangeOrderCount.Value = TodaysFinishedOrderList != null ? TodaysFinishedOrderList.FindAll(o => o.PRODUCT_CODE == (int)ItemType.Orange).Count : 0;
38 AppleOrderCount.Value = TodaysFinishedOrderList != null ? TodaysFinishedOrderList.FindAll(o => o.PRODUCT_CODE == (int)ItemType.Apple).Count : 0;
39 PearOrderCount.Value = TodaysFinishedOrderList != null ? TodaysFinishedOrderList.FindAll(o => o.PRODUCT_CODE == (int)ItemType.Pear).Count : 0;
40
41 OrderCountSeries[0].Values[0] = OrangeOrderCount;
42 OrderCountSeries[1].Values[0] = AppleOrderCount;
43 OrderCountSeries[2].Values[0] = PearOrderCount;
44 }

Pie2 cs

效果图

5、柱状图

前台代码

1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 21 22 23 24 25 26

Column xaml

后台代码

1 private Func _axisPercentage;
2 private string[] _storageLabels;
3 private IChartValues _storagePercentages;
4 public Func AxisPercentage { get { return _axisPercentage; } set { _axisPercentage = value; NotifyOfPropertyChange(() => AxisPercentage); } }
5 public string[] StorageLabels { get { return _storageLabels; } set { _storageLabels = value; NotifyOfPropertyChange(() => StorageLabels); } }
6 public IChartValues StoragePercentages { get { return _storagePercentages; } set { _storagePercentages = value; NotifyOfPropertyChange(() => StoragePercentages); } }
7 private void ShowStoragePercentageColumnChart()
8 {
9 StorageLabels = new[]
10 {
11 "单元一原料","单元一成品","单元二原料","单元二半成品","单元三原料","单元三半成品","单元四原料","单元四半成品"
12 };
13 AxisPercentage = val => val.ToString("P");
14 StoragePercentages = new ChartValues { 0.2, 0.5, 0.44, 0.88, 0.22, 0.6, 0.14, 0.09 };
15 }

Column cs

效果图

6、折线图

前台代码

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

Line xaml

后台代码

1 private string[] _xTimeLabels;
2 private Func _yPercentageFormat;
3 private ChartValues _occupancyRatesCell1;
4 private ChartValues _occupancyRatesCell2;
5 private ChartValues _occupancyRatesCell3;
6 private ChartValues _occupancyRatesCell4;
7 public string[] XTimeLabels { get { return _xTimeLabels; } set { _xTimeLabels = value; NotifyOfPropertyChange(() => XTimeLabels); } }
8 public Func YPercentageFormat { get { return _yPercentageFormat; } set { _yPercentageFormat = value; NotifyOfPropertyChange(() => YPercentageFormat); } }
9 public ChartValues OccupancyRatesCell1 { get { return _occupancyRatesCell1; } set { _occupancyRatesCell1 = value; NotifyOfPropertyChange(() => OccupancyRatesCell1); } }
10 public ChartValues OccupancyRatesCell2 { get { return _occupancyRatesCell2; } set { _occupancyRatesCell2 = value; NotifyOfPropertyChange(() => OccupancyRatesCell2); } }
11 public ChartValues OccupancyRatesCell3 { get { return _occupancyRatesCell3; } set { _occupancyRatesCell3 = value; NotifyOfPropertyChange(() => OccupancyRatesCell3); } }
12 public ChartValues OccupancyRatesCell4 { get { return _occupancyRatesCell4; } set { _occupancyRatesCell4 = value; NotifyOfPropertyChange(() => OccupancyRatesCell4); } }
13 private void InitOccupancyRate()
14 {
15 YPercentageFormat = value => value.ToString("P0"); //P0表示只保留整数，P表示保留小数点后两位
16 XTimeLabels = new[] { "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00" }; ;
17 OccupancyRatesCell1 = new ChartValues { 0.75, 0.87, 0.82, 0.69, 0.73, 0.71, 0.80, 0.85, 0.88, 0.79 };
18 OccupancyRatesCell2 = new ChartValues { 0.84, 0.77, 0.66, 0.74, 0.83, 0.79, 0.75, 0.79, 0.84, 0.86 };
19 OccupancyRatesCell3 = new ChartValues { 0.87, 0.85, 0.77, 0.88, 0.69, 0.82, 0.77, 0.78, 0.73, 0.84 };
20 OccupancyRatesCell4 = new ChartValues { 0.81, 0.76, 0.78, 0.80, 0.64, 0.85, 0.83, 0.68, 0.78, 0.82 };
21 }

Line cs

效果图

7、LiveCharts所用到的样式Style.xaml

1
2
3
10
11
18
19
26
27
34
35
42
43

style