LiveCharts是一款非常好用的WPF圖表繪制類庫,相比其他同類類庫,LiveCharts的UI風格樣式更加多樣更加美觀。
准備工作:安裝以下兩個類庫:
1、甘特圖
前台View代碼

1 <lvc:CartesianChart Grid.Row="2" Zoom="None" Margin="0,40"> 2 <lvc:CartesianChart.AxisX> 3 <!--LabelFormatter-軸坐標標簽樣式;MinValue-軸坐標起點;MaxValue-軸坐標終點--> 4 <lvc:Axis Style="{StaticResource FontChartAxis}" 5 LabelFormatter="{Binding Path=Formatter}" 6 MinValue="{Binding Path=From, Mode=TwoWay}" 7 MaxValue="{Binding Path=To, Mode=TwoWay}"> 8 <!--Separator-坐標平面分割線 StrokeDashArray-分割線虛線間隔--> 9 <lvc:Axis.Separator> 10 <lvc:Separator Stroke="#33ffffff" StrokeDashArray="10"/> 11 </lvc:Axis.Separator> 12 </lvc:Axis> 13 </lvc:CartesianChart.AxisX> 14 <lvc:CartesianChart.AxisY> 15 <!--Labels-軸坐標標簽列表--> 16 <lvc:Axis Style="{StaticResource FontChartAxis}" 17 Labels="{Binding Path=Labels}"> 18 <lvc:Axis.Separator> 19 <lvc:Separator Stroke="#33ffffff" StrokeDashArray="10"/> 20 </lvc:Axis.Separator> 21 </lvc:Axis> 22 </lvc:CartesianChart.AxisY> 23 <!--Series-數據序列--> 24 <lvc:CartesianChart.Series> 25 <!--RowSeries-數據序列按行顯示 LabelPosition-數據標簽位置 DataLabels-是否顯示數據標簽 Values-數據序列值--> 26 <lvc:RowSeries Style="{StaticResource FontRowSeries}" 27 Fill="#008bd3" LabelsPosition="Parallel" DataLabels="True" Values="{Binding Path=Values}"/> 28 </lvc:CartesianChart.Series> 29 </lvc:CartesianChart>
后台ViewModel代碼

1 private double _from; 2 private double _to; 3 private Func<double, string> _formatter; 4 private string[] _labels; 5 private ChartValues<GanttPoint> _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<double, string> Formatter { get { return _formatter; } set { _formatter = value; NotifyOfPropertyChange(() => Formatter); } } 9 public string[] Labels { get { return _labels; } set { _labels = value; NotifyOfPropertyChange(() => Labels); } } 10 public ChartValues<GanttPoint> 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<GanttPoint> 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 }
效果圖
2、進度環
前台View代碼

1 <!--Gauge進度環 GaugeBackground背景環顏色 HighFontSize環內數字字號 Uses360Mode半圓還是整圓 InnerRadius內圓半徑 Value環內數字值--> 2 <lvc:Gauge Grid.Row="0" GaugeBackground="#11ffffff" HighFontSize="24" 3 Uses360Mode="False" From="0" To="100" InnerRadius="35" Value="{Binding OrderProgress}" > 4 <!--該設置:起點零點 方向逆時針--> 5 <lvc:Gauge.GaugeRenderTransform> 6 <TransformGroup> 7 <RotateTransform Angle="90"></RotateTransform> 8 <ScaleTransform ScaleX="-1"></ScaleTransform> 9 </TransformGroup> 10 </lvc:Gauge.GaugeRenderTransform> 11 <!--設置圓環的顏色漸變--> 12 <lvc:Gauge.GaugeActiveFill> 13 <LinearGradientBrush> 14 <GradientStop Color="#539fff" Offset="0.0" /> 15 <GradientStop Color="#00eaff" Offset="0.5" /> 16 <GradientStop Color="#6af0ff" Offset="1.0" /> 17 </LinearGradientBrush> 18 </lvc:Gauge.GaugeActiveFill> 19 </lvc:Gauge>
后台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 }
效果圖
3、柱狀堆積圖
前台View代碼

1 <!--柱狀堆積圖--> 2 <!--LegendLocation圖例位置--> 3 <lvc:CartesianChart Grid.Column="1" LegendLocation="Right" Margin="20,0"> 4 <lvc:CartesianChart.AxisX> 5 <lvc:Axis Style="{StaticResource FontChartAxis}" Labels="{Binding Labels}" Title="時間"> 6 <lvc:Axis.Separator> 7 <!--Step柱間隔--> 8 <lvc:Separator Step="5" Stroke="#33ffffff" StrokeDashArray="10"/> 9 </lvc:Axis.Separator> 10 </lvc:Axis> 11 </lvc:CartesianChart.AxisX> 12 <lvc:CartesianChart.AxisY> 13 <lvc:Axis Style="{StaticResource FontChartAxis}" Title="數量"> 14 <lvc:Axis.Separator> 15 <lvc:Separator Stroke="#33ffffff" StrokeDashArray="10"/> 16 </lvc:Axis.Separator> 17 </lvc:Axis> 18 </lvc:CartesianChart.AxisY> 19 <lvc:CartesianChart.Series> 20 <!--StackedColumnSeries要比較的其中一類 MaxColumnWidth柱狀圖寬度 DataLabels是否顯示柱狀圖數值 Title圖例中名稱--> 21 <lvc:StackedColumnSeries Style="{StaticResource FontStackedColumnSeries}" 22 Fill="#222222" LabelsPosition="Merged" MaxColumnWidth="20" DataLabels="True" 23 Values="{Binding V1}" Title="黑色U盤"> 24 </lvc:StackedColumnSeries> 25 <lvc:StackedColumnSeries Style="{StaticResource FontStackedColumnSeries}" 26 Fill="#26def2" LabelsPosition="Merged" MaxColumnWidth="20" DataLabels="True" 27 Values="{Binding V2}" Title="藍色U盤"> 28 </lvc:StackedColumnSeries> 29 <lvc:StackedColumnSeries Style="{StaticResource FontStackedColumnSeries}" 30 Fill="#ee6363" LabelsPosition="Merged" MaxColumnWidth="20" DataLabels="True" 31 Values="{Binding V3}" Title="紅色U盤"> 32 </lvc:StackedColumnSeries> 33 </lvc:CartesianChart.Series> 34 <lvc:CartesianChart.ChartLegend> 35 <!--BulletSize圖例中圓點尺寸--> 36 <lvc:DefaultLegend BulletSize="12" Style="{StaticResource FontChartLegend}"/> 37 </lvc:CartesianChart.ChartLegend> 38 </lvc:CartesianChart>
后台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<ObservableValue> 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<ObservableValue> 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<ObservableValue> 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 }
效果圖
4、餅狀圖
前台代碼

1 <!--環形餅狀圖--> 2 <!--InnerRadius內圓半徑--> 3 <lvc:PieChart Grid.Column="0" Margin="80,25" LegendLocation="Right" InnerRadius="35"> 4 <lvc:PieChart.Series> 5 <!--PieSeries要比較的其中一類 --> 6 <lvc:PieSeries Style="{StaticResource FontPieSeries}" Fill="#222222" DataLabels="True" Values="4" Title="黑色U盤"/> 7 <lvc:PieSeries Style="{StaticResource FontPieSeries}" Fill="#26def2" DataLabels="True" Values="5" Title="藍色U盤"/> 8 <lvc:PieSeries Style="{StaticResource FontPieSeries}" Fill="#ee6363" DataLabels="True" Values="6" Title="紅色U盤"/> 9 </lvc:PieChart.Series> 10 <lvc:PieChart.ChartLegend> 11 <lvc:DefaultLegend BulletSize="12" Style="{StaticResource FontChartLegend}"/> 12 </lvc:PieChart.ChartLegend> 13 </lvc:PieChart>
效果圖
或者:
前台代碼

1 <lvc:PieChart Name="Chart" Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="4" 2 Series="{Binding OrderCountSeries}" Margin="0,0,35,0" LegendLocation="Right" InnerRadius="25"> 3 <lvc:PieChart.ChartLegend> 4 <lvc:DefaultLegend BulletSize="18" Style="{StaticResource FontDefaultStyle}"></lvc:DefaultLegend> 5 </lvc:PieChart.ChartLegend> 6 </lvc:PieChart>
后台代碼

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<ObservableValue> { new ObservableValue() }, 15 DataLabels = true, 16 FontSize = 28 17 }, 18 new PieSeries 19 { 20 Title = "蘋果汁 Apple", 21 Values = new ChartValues<ObservableValue> { new ObservableValue() }, 22 DataLabels = true, 23 FontSize = 28 24 }, 25 new PieSeries 26 { 27 Title = "梨 汁 Pear", 28 Values = new ChartValues<ObservableValue> { 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 }
效果圖
5、柱狀圖
前台代碼

1 <!--LegendLocation圖例位置--> 2 <lvc:CartesianChart Margin="20,75,20,15"> 3 <lvc:CartesianChart.AxisX> 4 <lvc:Axis Style="{StaticResource FontChartAxis}" FontSize="12" Labels="{Binding Path=StorageLabels}" Title="庫位" LabelsRotation="20"> 5 <lvc:Axis.Separator> 6 <!--Step柱間隔--> 7 <lvc:Separator Step="1" IsEnabled="False"/> 8 </lvc:Axis.Separator> 9 </lvc:Axis> 10 </lvc:CartesianChart.AxisX> 11 <lvc:CartesianChart.AxisY> 12 <lvc:Axis Style="{StaticResource FontChartAxis}" FontSize="12" Title="百分比" LabelFormatter="{Binding Path=AxisPercentage}"> 13 <lvc:Axis.Separator> 14 <lvc:Separator Stroke="#33ffffff" StrokeDashArray="10"/> 15 </lvc:Axis.Separator> 16 </lvc:Axis> 17 </lvc:CartesianChart.AxisY> 18 <lvc:CartesianChart.Series> 19 <lvc:ColumnSeries Style="{StaticResource FontColumnSeries}" Values="{Binding Path=StoragePercentages}" 20 DataLabels="True" LabelsPosition="Top"/> 21 </lvc:CartesianChart.Series> 22 <lvc:CartesianChart.ChartLegend> 23 <!--BulletSize圖例中圓點尺寸--> 24 <lvc:DefaultLegend BulletSize="12" Style="{StaticResource FontChartLegend}"/> 25 </lvc:CartesianChart.ChartLegend> 26 </lvc:CartesianChart>
后台代碼

1 private Func<double, string> _axisPercentage; 2 private string[] _storageLabels; 3 private IChartValues _storagePercentages; 4 public Func<double, string> 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<double> { 0.2, 0.5, 0.44, 0.88, 0.22, 0.6, 0.14, 0.09 }; 15 }
效果圖
6、折線圖
前台代碼

1 <lvc:CartesianChart Grid.Column="2" LegendLocation="Right" Margin="15,0"> 2 <lvc:CartesianChart.AxisX> 3 <lvc:Axis Style="{StaticResource FontChartAxis}" FontSize="12" Labels="{Binding Path=XTimeLabels}" Title="時間" LabelsRotation="40"> 4 <lvc:Axis.Separator> 5 <!--Step柱間隔--> 6 <lvc:Separator Step="1" IsEnabled="False"/> 7 </lvc:Axis.Separator> 8 </lvc:Axis> 9 </lvc:CartesianChart.AxisX> 10 <lvc:CartesianChart.AxisY> 11 <lvc:Axis Style="{StaticResource FontChartAxis}" FontSize="12" Title="百分比" LabelFormatter="{Binding Path=YPercentageFormat}"> 12 <lvc:Axis.Separator> 13 <lvc:Separator Stroke="#33ffffff" StrokeDashArray="10"/> 14 </lvc:Axis.Separator> 15 </lvc:Axis> 16 </lvc:CartesianChart.AxisY> 17 <lvc:CartesianChart.Series> 18 <lvc:LineSeries Values="{Binding OccupancyRatesCell1}" PointGeometrySize="2" Stroke="#00f5ff" Fill="#1100f5ff" LineSmoothness="0" Title="一單元"/> 19 <lvc:LineSeries Values="{Binding OccupancyRatesCell2}" PointGeometrySize="2" Stroke="#ccffcc" Fill="#11ccffcc" LineSmoothness="0" Title="二單元"/> 20 <lvc:LineSeries Values="{Binding OccupancyRatesCell3}" PointGeometrySize="2" Stroke="#333399" Fill="#11333399" LineSmoothness="0" Title="三單元"/> 21 <lvc:LineSeries Values="{Binding OccupancyRatesCell4}" PointGeometrySize="2" Stroke="#9966cc" Fill="#119966cc" LineSmoothness="0" Title="四單元"/> 22 </lvc:CartesianChart.Series> 23 <lvc:CartesianChart.ChartLegend> 24 <!--BulletSize圖例中圓點尺寸--> 25 <lvc:DefaultLegend BulletSize="12" Style="{StaticResource FontChartLegend}"/> 26 </lvc:CartesianChart.ChartLegend> 27 </lvc:CartesianChart>
后台代碼

1 private string[] _xTimeLabels; 2 private Func<double, string> _yPercentageFormat; 3 private ChartValues<double> _occupancyRatesCell1; 4 private ChartValues<double> _occupancyRatesCell2; 5 private ChartValues<double> _occupancyRatesCell3; 6 private ChartValues<double> _occupancyRatesCell4; 7 public string[] XTimeLabels { get { return _xTimeLabels; } set { _xTimeLabels = value; NotifyOfPropertyChange(() => XTimeLabels); } } 8 public Func<double, string> YPercentageFormat { get { return _yPercentageFormat; } set { _yPercentageFormat = value; NotifyOfPropertyChange(() => YPercentageFormat); } } 9 public ChartValues<double> OccupancyRatesCell1 { get { return _occupancyRatesCell1; } set { _occupancyRatesCell1 = value; NotifyOfPropertyChange(() => OccupancyRatesCell1); } } 10 public ChartValues<double> OccupancyRatesCell2 { get { return _occupancyRatesCell2; } set { _occupancyRatesCell2 = value; NotifyOfPropertyChange(() => OccupancyRatesCell2); } } 11 public ChartValues<double> OccupancyRatesCell3 { get { return _occupancyRatesCell3; } set { _occupancyRatesCell3 = value; NotifyOfPropertyChange(() => OccupancyRatesCell3); } } 12 public ChartValues<double> 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<double> { 0.75, 0.87, 0.82, 0.69, 0.73, 0.71, 0.80, 0.85, 0.88, 0.79 }; 18 OccupancyRatesCell2 = new ChartValues<double> { 0.84, 0.77, 0.66, 0.74, 0.83, 0.79, 0.75, 0.79, 0.84, 0.86 }; 19 OccupancyRatesCell3 = new ChartValues<double> { 0.87, 0.85, 0.77, 0.88, 0.69, 0.82, 0.77, 0.78, 0.73, 0.84 }; 20 OccupancyRatesCell4 = new ChartValues<double> { 0.81, 0.76, 0.78, 0.80, 0.64, 0.85, 0.83, 0.68, 0.78, 0.82 }; 21 }
效果圖
7、LiveCharts所用到的樣式Style.xaml

1 <!--LiveCharts文字樣式--> 2 <!--圖表坐標軸文字--> 3 <Style x:Key="FontChartAxis" TargetType="{x:Type lvc:Axis}"> 4 <Setter Property="HorizontalAlignment" Value="Center"/> 5 <Setter Property="VerticalAlignment" Value="Center"/> 6 <Setter Property="FontFamily" Value="Microsoft Yahei"/> 7 <Setter Property="FontSize" Value="14"/> 8 <Setter Property="Foreground" Value="White"/> 9 </Style> 10 <!--柱狀堆積圖文字--> 11 <Style x:Key="FontStackedColumnSeries" TargetType="{x:Type lvc:StackedColumnSeries}"> 12 <Setter Property="HorizontalAlignment" Value="Center"/> 13 <Setter Property="VerticalAlignment" Value="Center"/> 14 <Setter Property="FontFamily" Value="Microsoft Yahei"/> 15 <Setter Property="FontSize" Value="10"/> 16 <Setter Property="Foreground" Value="White"/> 17 </Style> 18 <!--柱狀圖文字--> 19 <Style x:Key="FontColumnSeries" TargetType="{x:Type lvc:ColumnSeries}"> 20 <Setter Property="HorizontalAlignment" Value="Center"/> 21 <Setter Property="VerticalAlignment" Value="Center"/> 22 <Setter Property="FontFamily" Value="Microsoft Yahei"/> 23 <Setter Property="FontSize" Value="10"/> 24 <Setter Property="Foreground" Value="White"/> 25 </Style> 26 <!--圖例文字--> 27 <Style x:Key="FontChartLegend" TargetType="{x:Type lvc:DefaultLegend}"> 28 <Setter Property="HorizontalAlignment" Value="Center"/> 29 <Setter Property="VerticalAlignment" Value="Center"/> 30 <Setter Property="FontFamily" Value="Microsoft Yahei"/> 31 <Setter Property="FontSize" Value="12"/> 32 <Setter Property="Foreground" Value="White"/> 33 </Style> 34 <!--圖表行文字--> 35 <Style x:Key="FontRowSeries" TargetType="{x:Type lvc:RowSeries}"> 36 <Setter Property="HorizontalAlignment" Value="Center"/> 37 <Setter Property="VerticalAlignment" Value="Center"/> 38 <Setter Property="FontFamily" Value="Microsoft Yahei"/> 39 <Setter Property="FontSize" Value="9"/> 40 <Setter Property="Foreground" Value="White"/> 41 </Style> 42 <!--餅狀圖文字--> 43 <Style x:Key="FontPieSeries" TargetType="{x:Type lvc:PieSeries}"> 44 <Setter Property="HorizontalAlignment" Value="Center"/> 45 <Setter Property="VerticalAlignment" Value="Center"/> 46 <Setter Property="FontFamily" Value="Microsoft Yahei"/> 47 <Setter Property="FontSize" Value="24"/> 48 <Setter Property="Foreground" Value="White"/> 49 </Style>