WPF绘制图表-LiveCharts

Posted 2020-12-12 zwh1993

 

1、甘特图

前台View代码

 1 <lvc:CartesianChart Grid.Row="2" Zoom="None" Margin="0,40">
 2     <lvc:CartesianChart.AxisX>
 3         <!--LabelFormatter-轴坐标标签样式；MinValue-轴坐标起点；MaxValue-轴坐标终点-->
 4         <lvc:Axis Foreground="White" FontSize="14" FontFamily="Source Han Serif CN"
 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="5"/>
11             </lvc:Axis.Separator>
12         </lvc:Axis>
13     </lvc:CartesianChart.AxisX>
14     <lvc:CartesianChart.AxisY>
15         <!--Labels-轴坐标标签列表-->
16         <lvc:Axis Foreground="White" FontSize="14" FontFamily="Source Han Serif CN"
17                   Labels="{Binding Path=Labels}">
18             <lvc:Axis.Separator>
19                 <lvc:Separator Stroke="#33ffffff" StrokeDashArray="5"/>
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 Foreground="White" FontSize="9" FontFamily="Source Han Serif CN"
27                        Fill="#008bd3" LabelsPosition="Top" DataLabels="False" Values="{Binding Path=Values}"/>
28     </lvc:CartesianChart.Series>
29 </lvc:CartesianChart>

Gantt Chart xaml

后台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 }

Gantt Chart cs

效果图

 

 

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>

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、