C#WPF数字大屏项目实战08--生产量/良品统计

1、区域划分

生产量/良品统计这部分位于第二列的第二行

2、livechart拆线图

定义折线图,如下:

<lvc:CartesianChart>

<lvc:CartesianChart.Series>

<!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->

<lvc:LineSeries/>

</lvc:CartesianChart.Series>

</lvc:CartesianChart>

LinSeries 绑定数据设定Values即可, 可以看到Values单词带s,则代表这是一种复数集合类型,继承于 IChartValues,所以最终绑定的数据符合 ChartValues 即可,下图绑定了为数字类型的集合:

<lvc:CartesianChart>

<lvc:CartesianChart.Series>

<!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->

<lvc:LineSeries Values="1,2,3,4,5,6"/>

<lvc:LineSeries Values="2,4,6,8,10,12"/>

</lvc:CartesianChart.Series>

</lvc:CartesianChart>

这里是 LiveChart 一些简单的使用方法,下面是用绑定数据的方式进行显示,在工作中,尽量使用数据绑定的方式,更适合项目的维护

1、先定义模型中的属性

YeildValues1,YeildValues2是前台控件绑定的属性名称,并在构造函数中给变量初始化了数据

2、前台绑定

cs 复制代码
<!--第2行:生产量数据-->
<GroupBox  Grid.Row="1" Header="生产量/良品率统计" Tag="Yield Statistics">
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30,-190,10,0">
            <Border Width="8" Height="8" Background=" #2BB6FE" Margin="3,0"/>
            <TextBlock Text="产量" Foreground="#44FFFFFF" FontSize="9" VerticalAlignment="Center" Margin="10,0,10,0"/>
            <Border Width="8" Height="8" Background="IndianRed" Margin="3,0"/>
            <TextBlock Text="良品率" Foreground="#44FFFFFF" FontSize="9" VerticalAlignment="Center" Margin="10,0,10,0"/>
        </StackPanel>
         <!--拆线图-->
        <lvc:CartesianChart Grid.Row="1" DisableAnimations="True">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Values="{Binding YeildValues1}" LineSmoothness="0" Stroke="IndianRed" Fill="Transparent"/>
                <lvc:LineSeries Values="{Binding YeildValues2}" LineSmoothness="0" Stroke="#DD2BB6FE">
                    <lvc:LineSeries.Fill>
                        <!--线性渐变-->
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="#882BB6FE" Offset="0"/>
                            <GradientStop Color="#442BB6FE" Offset="0.2"/>
                            <GradientStop Color="#112BB6FE" Offset="1"/>
                        </LinearGradientBrush>
                    </lvc:LineSeries.Fill>
                </lvc:LineSeries>
            </lvc:CartesianChart.Series>
            <!--X轴布局-->
            <lvc:CartesianChart.AxisX>
                <!--拆线图底部标签刻度,Separator表示间隔大小-->
                <lvc:Axis Labels="01/01,02/01,03/02,04/02,05/02,06/02,07/02,08/02,09/02,10/02,11/02,12/02" Foreground="#33FFFFFF">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="1" StrokeThickness="0"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <!--Y轴布局,Step表示步长大小,MaxValue表示最大值-->
            <lvc:CartesianChart.AxisY>
                <lvc:Axis MinValue="0" MaxValue="375" Foreground="#33FFFFFF">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="75" Stroke="#10FFFFFF"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</GroupBox>

3、运行效果

4、小结

本节用到了拆线图的相关设置,以展示生产量和良品率

走过路过,不要错过,欢迎点赞,收藏,转载,复制,抄袭,留言,动动你的金手指,财务自由

相关推荐
一点媛艺3 小时前
Kotlin函数由易到难
开发语言·python·kotlin
姑苏风3 小时前
《Kotlin实战》-附录
android·开发语言·kotlin
奋斗的小花生4 小时前
c++ 多态性
开发语言·c++
魔道不误砍柴功4 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
闲晨4 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享
老猿讲编程4 小时前
一个例子来说明Ada语言的实时性支持
开发语言·ada
Chrikk5 小时前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*5 小时前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go
canyuemanyue5 小时前
go语言连续监控事件并回调处理
开发语言·后端·golang
杜杜的man6 小时前
【go从零单排】go语言中的指针
开发语言·后端·golang