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、小结

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

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

相关推荐
郝学胜-神的一滴12 分钟前
Effective Python 第44条:用纯属性与修饰器取代旧式的 setter 与 getter 方法
开发语言·python·程序人生·软件工程
程序员莫小特1 小时前
老题新解|计算2的N次方
开发语言·数据结构·算法·青少年编程·信息学奥赛一本通
千忧散2 小时前
Unity Socket学习笔记 (三)TCP&UDP
笔记·学习·unity·c#
white-persist3 小时前
XXE 注入漏洞全解析:从原理到实战
开发语言·前端·网络·安全·web安全·网络安全·信息可视化
人生导师yxc3 小时前
Java中Mock的写法
java·开发语言
半路程序员3 小时前
Go语言学习(四)
开发语言·学习·golang
沐知全栈开发4 小时前
C# 枚举(Enum)
开发语言
秦禹辰4 小时前
轻量级开源文件共享系统PicoShare本地部署并实现公网环境文件共享
开发语言·后端·golang
脑子慢且灵4 小时前
C语言与Java语言编译过程及文件类型
java·c语言·开发语言·汇编·编辑器
蒙奇D索大4 小时前
【C语言加油站】C语言文件操作详解:从“流”的概念到文件的打开与关闭
c语言·开发语言·笔记·学习·改行学it