第三行最后一列 柱状图效果LiveCharts 设备效率指标

最后一列前面与第二列，前两行相同

复制

没有表头，只有柱状图效果

 

柱状图

1、安装LiveCharts.Wpf包

2、引入命名空间

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

lvc可以自己随便定义

后面引用lvc:都是这个库里面的

3、代码

<lvc:CartesianChart Grid.Row="2" >
</lvc:CartesianChart>

默认效果

 我们是堆叠的柱状图，

XY轴也要分别设置

1、数据

堆叠的柱状图 StackedColumnSeries 

最大列宽：MaxColumnWidth="14"

渐变效果填充

                        <lvc:CartesianChart.Series>
                            <lvc:StackedColumnSeries Values="22.65,7.74,22.50,21.69,20.71,14.25,8.57,8.86,2.46,9.42"
                                                     MaxColumnWidth="14">
                                <lvc:StackedColumnSeries.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#729BDF" Offset="0"/>
                                        <GradientStop Color="#FFF" Offset="2"/>
                                    </LinearGradientBrush>
                                </lvc:StackedColumnSeries.Fill>
                            </lvc:StackedColumnSeries>
                            <lvc:StackedColumnSeries Values="12.01,7.53,3.20,2.19,18.64,10.59,9.33,23.41,2.22,5.41"
                                                         MaxColumnWidth="14">
                                <lvc:StackedColumnSeries.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Orange" Offset="0"/>
                                        <GradientStop Color="#FFF" Offset="2"/>
                                    </LinearGradientBrush>
                                </lvc:StackedColumnSeries.Fill>
                            </lvc:StackedColumnSeries>
                            <lvc:StackedColumnSeries Values="5.82,18.78,4.42,21.64,24.31,12.06,8.73,9.12,18.09,20.35"
                                                         MaxColumnWidth="14">
                                <lvc:StackedColumnSeries.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#4CC08F" Offset="0"/>
                                        <GradientStop Color="#FFF" Offset="2"/>
                                    </LinearGradientBrush>
                                </lvc:StackedColumnSeries.Fill>
                            </lvc:StackedColumnSeries>
                            <lvc:StackedColumnSeries Values="19.62,22.79,20.74,19.96,10.97,0.40,7.86,22.22,20.11,13.29"
                                                         MaxColumnWidth="14">
                                <lvc:StackedColumnSeries.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#FE644A" Offset="0"/>
                                        <GradientStop Color="#FFF" Offset="2"/>
                                    </LinearGradientBrush>
                                </lvc:StackedColumnSeries.Fill>
                            </lvc:StackedColumnSeries>
                        </lvc:CartesianChart.Series>

2、X轴

                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis Labels="设备1,设备2,设备3,设备4,设备5,设备6,设备7,设备8,设备9,设备10"
                                          Foreground="#DDD">
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="1" StrokeThickness="0"/>
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisX>

3、Y轴

                        <lvc:CartesianChart.AxisY>
                            <lvc:Axis MinValue="0" MaxValue="80">
                                <lvc:Axis.Separator>
                                    <!--每隔20显示一条虚线-->
                                    <lvc:Separator Step="20" StrokeDashArray="2,2"/>
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisY>