1、區(qū)域劃分

生產(chǎn)量/良品統(tǒng)計(jì)這部分位于第二列的第二行

?2、livechart拆線圖

定義折線圖,如下:

<lvc:CartesianChart>
<lvc:CartesianChart.Series>
? ? ? <!--設(shè)置Series的類型為 Line 類型, 該類型提供了一些折線圖的實(shí)現(xiàn)-->
? ? <lvc:LineSeries/> ?
</lvc:CartesianChart.Series>
</lvc:CartesianChart>?

LinSeries 綁定數(shù)據(jù)設(shè)定Values即可, 可以看到Values單詞帶s，則代表這是一種復(fù)數(shù)集合類型，繼承于 IChartValues，所以最終綁定的數(shù)據(jù)符合 ChartValues 即可，下圖綁定了為數(shù)字類型的集合:

<lvc:CartesianChart>
?<lvc:CartesianChart.Series>
? ? ?<!--設(shè)置Series的類型為 Line 類型, 該類型提供了一些折線圖的實(shí)現(xiàn)-->
? ? ?<lvc:LineSeries Values="1,2,3,4,5,6"/>
? ? ?<lvc:LineSeries Values="2,4,6,8,10,12"/>
?</lvc:CartesianChart.Series>
</lvc:CartesianChart>
這里是 LiveChart 一些簡(jiǎn)單的使用方法，下面是用綁定數(shù)據(jù)的方式進(jìn)行顯示，在工作中，盡量使用數(shù)據(jù)綁定的方式，更適合項(xiàng)目的維護(hù)?

1、先定義模型中的屬性

YeildValues1，YeildValues2是前臺(tái)控件綁定的屬性名稱，并在構(gòu)造函數(shù)中給變量初始化了數(shù)據(jù)

?2、前臺(tái)綁定?

<!--第2行：生產(chǎn)量數(shù)據(jù)-->
<GroupBox  Grid.Row="1" Header="生產(chǎn)量/良品率統(tǒng)計(jì)" 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="產(chǎn)量" 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><!--拆線圖底部標(biāo)簽刻度，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表示步長(zhǎng)大小，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、運(yùn)行效果

4、小結(jié)

本節(jié)用到了拆線圖的相關(guān)設(shè)置，以展示生產(chǎn)量和良品率

走過(guò)路過(guò)，不要錯(cuò)過(guò)，歡迎點(diǎn)贊，收藏，轉(zhuǎn)載，復(fù)制，抄襲，留言，動(dòng)動(dòng)你的金手指，財(cái)務(wù)自由?