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

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

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

相关推荐
吾与谁归in11 分钟前
【C#设计模式(13)——代理模式(Proxy Pattern)】
设计模式·c#·代理模式
吾与谁归in12 分钟前
【C#设计模式(14)——责任链模式( Chain-of-responsibility Pattern)】
设计模式·c#·责任链模式
在下不上天18 分钟前
Flume日志采集系统的部署,实现flume负载均衡,flume故障恢复
大数据·开发语言·python
陌小呆^O^31 分钟前
Cmakelist.txt之win-c-udp-client
c语言·开发语言·udp
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
重生之我是数学王子1 小时前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
Ai 编码助手1 小时前
使用php和Xunsearch提升音乐网站的歌曲搜索效果
开发语言·php
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
神仙别闹1 小时前
基于C#和Sql Server 2008实现的(WinForm)订单生成系统
开发语言·c#
XINGTECODE1 小时前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang