（二）应用图表开发（插件使用）

1.原生定义

数据处理

界面呈现

  <ItemsControl ItemsSource="{Binding PrimaryList}">
      <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
              <UniformGrid Rows="1" />
          </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
          <DataTemplate>
              <Grid x:Name="gird" Background="Transparent">
                  <Grid.RowDefinitions>
                      <RowDefinition/>
                      <RowDefinition Height="30"/>
                  </Grid.RowDefinitions>
                  <StackPanel VerticalAlignment="Bottom">
                      <TextBlock Text="{Binding Value}" HorizontalAlignment="Center"/>
                      <Border Width="10" Height="{Binding Value}" Background="Orange" VerticalAlignment="Bottom" CornerRadius="5,5,0,0"/>
                  </StackPanel>
                  <Border BorderBrush="#ddd" BorderThickness="0,1,0,0" Grid.Row="1"/>
                  <TextBlock Text="{Binding XLable}" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
              </Grid>
              <DataTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="True">
                      <Setter TargetName="gird"  Property="Background" Value="#eee"/>
                  </Trigger>
              </DataTemplate.Triggers>
          </DataTemplate>
      </ItemsControl.ItemTemplate>
  </ItemsControl>

数据量大的只能用后面三个，自定义的需要自己处理很多细节性能

2.LiveCharts

性能一般，交互性好

2.1 初步认识

 <!--  LineSmoothness线的平滑度  -->
 <!--  PointGeometrySize节点大小  -->
 <!--  Title 图例  -->
 <!--  ShowLabels 是否展示 坐标  -->
 <!--  Fill Stroke 都可以使用渐变色  -->
 <!--  Step="1"：设置每个分隔符之间的间隔距离为1个单位。  -->
 <!--  StrokeThickness="0"：设置分隔符线的厚度为0，即不显示实际的分隔符线，只显示分隔符的位置。  -->

可以画哪些图？

线性图（Line Chart）：展示趋势随时间变化的数据。
柱状图（Column Chart）：展示不同类别数据之间的比较。
饼图（Pie Chart）：展示各组成部分占比的数据。
散点图（Scatter Chart）：展示数据点之间的关系。
区域图（Area Chart）：展示数据的累积值随时间变化的情况。
堆积柱状图（Stacked Column Chart）：展示不同类别数据之间的比较，并堆叠显示数据。
堆积面积图（Stacked Area Chart）：展示数据的累积值随时间变化，并堆叠显示数据。

除了以上列举的几种常见图表类型外，LiveCharts还支持其他一些图表类型，如条形图、雷达图、泡泡图等。同时，LiveCharts还提供了丰富的自定义选项和交互功能，可以根据需求灵活定制和配置图表的
外观和行为。

2.2 MVVM绑定

当需要对序列进行选择动态展示时，可以对序列进行绑定
以下演示对value的绑定

初始化

自动更新

如果要自动更新要更改Y轴类型ObservableValue（有观察者）

通过更改最值附带滚动

 <lvc:CartesianChart Grid.Row="2"  >
     <lvc:CartesianChart.Series>
         <lvc:LineSeries
             Title="湿度"
             Fill="#11ff8800"
             LineSmoothness="0"
             PointGeometrySize="0"
             Stroke="Orange"
             Values="{Binding ChartValues}" />
     </lvc:CartesianChart.Series> 
     <lvc:CartesianChart.AxisX>
         <lvc:Axis
             FontSize="12"
             Foreground="Green"
             ShowLabels="True"
             MinValue="{Binding AxisMin}"
             MaxValue="{Binding AxisMax}">
             <lvc:Axis.Separator>
                 <lvc:Separator Step="{Binding AxisStep}" StrokeThickness="0" />
             </lvc:Axis.Separator>
         </lvc:Axis>
     </lvc:CartesianChart.AxisX>
     <lvc:CartesianChart.AxisY>
         <lvc:Axis MaxValue="160" MinValue="0">
             <!--<lvc:Axis.Sections>
          <lvc:AxisSection
              Stroke="Red"
              StrokeThickness="2"
              Value="80" />
      </lvc:Axis.Sections>-->
             <lvc:Axis.Separator>
                 <lvc:Separator Step="40" />
             </lvc:Axis.Separator>
         </lvc:Axis>
     </lvc:CartesianChart.AxisY>
 </lvc:CartesianChart>