WPF中关于Syncfusion中SfChart的使用

Syncfusion是一款第三方的控件库，里面各种控件样式的展示不用说，样式非常丰富，最大的好处是跨平台。本文章讲述WPF中关于Syncfusion中SfChartSfChart的使用，是比较好的展示表格。
在NuGet包中安装包Syncfusion.Xamarin.SfChart包。

首先，在page页进行引用。xmlns:Chart

<Page   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
      mc:Ignorable="d" 
      xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
      d:DesignHeight="420" d:DesignWidth="780"
      Title="ActiveEnergyConsume">

其次是表格的定制

<Grid.Resources>
            <DataTemplate x:Key="ylabelTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding LabelContent}" Foreground="Black"                    FontSize="13"/>
                    <TextBlock Text="%" FontSize="13"/>
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="legend">
                <StackPanel Orientation="Horizontal">
                    <Grid Margin="20,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Rectangle Width="10" Height="10" Fill="{Binding Interior}"/>
                        <TextBlock Margin="5,0,0,0" FontSize="12" Grid.Column="1" 
                                   Foreground="Black" Text="{Binding Label}"/>
                    </Grid>
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="xLabelTemplate">
                <TextBlock Text="{Binding LabelContent}" Foreground="Black" FontSize="13"/>
            </DataTemplate>

            <DataTemplate x:Key="yheadertemplate">
                <TextBlock Text="当前功率" Margin="0,0,0,15" FontSize="15" />
            </DataTemplate>

            <DataTemplate x:Key="xheadertemplate">
                <TextBlock Text="时 间" Margin="0,10,0,0" FontSize="12"/>
            </DataTemplate>

            <Style TargetType="Line" x:Key="AxisStyle">
                <Setter Property="Stroke" Value="DarkGray" />
                <Setter Property="StrokeThickness" Value="1"/>
            </Style>
            
        </Grid.Resources>
 <chart:SfChart Header="实时电力能耗" HorizontalAlignment="Center" Margin="10" VerticalAlignment="Center" 
                       FontSize="20" 
                       x:Name="RealtimeEnergyConsumeElectricChart"
                       AreaBorderBrush="#8e8e8e" 
                       AreaBorderThickness="0,1,1,1" 
                       Background="White"
                       Height="390"
                        >
            <chart:SfChart.Legend>
                <chart:ChartLegend Foreground="Black" DockPosition="Bottom" 
                                   ItemTemplate="{StaticResource legend}" 
                                   HorizontalContentAlignment="Center"/>
            </chart:SfChart.Legend>
            <chart:SfChart.PrimaryAxis>
                <chart:DateTimeAxis FontSize="10"  PlotOffset="15" 
                                     ShowTrackBallInfo="True"  ShowGridLines="False"
                                     LabelFormat="hh:mm:ss"
                                     AxisLineStyle="{StaticResource AxisStyle}"  
                                     HeaderTemplate="{StaticResource xheadertemplate}"
                                     LabelTemplate="{StaticResource xLabelTemplate}"/>
            </chart:SfChart.PrimaryAxis>
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis FontSize="15" Header="当前功率(KW)" Maximum="20" Minimum="0"  Foreground="Black" Interval="2"                                   
                                     HorizontalAlignment="Center" 
                                     AxisLineStyle="{StaticResource AxisStyle}"                                                                        
                                     MajorTickLineStyle="{StaticResource  AxisStyle}"/>
            </chart:SfChart.SecondaryAxis>
            <chart:SplineSeries EnableAnimation="True"  Label="瞬时功率(KW)" 
                              ItemsSource="{Binding ElectricInfoCollection}" XBindingPath="EnergyChartTime" 
                              YBindingPath="EnergyConsumptionValue" ShowTooltip="True"
                              DataContext="{Binding Electric, Source={StaticResource Locator}}">
            </chart:SplineSeries>

界面展示：

数据绑定：

private ObservableCollection<LineReportEnergyChartInfo> _electricInfo;
        public ObservableCollection<LineReportEnergyChartInfo> ElectricInfoCollection
        {
            get { return _electricInfo; }
            set { this._electricInfo = value; }
        }
    
    //大于多少条数据开始删除                     
     if (_electricInfo.Count > Login.MaxChartDataNumber)
     {
         _electricInfo.RemoveAt(0);
     }
     //实时图表电接收数据 
     _electricInfo.Add(new LineReportEnergyChartInfo()
     {
         EnergyChartTime = message.Content.RcvTime,
         EnergyConsumptionValue = tElec.MeterPower
     });

X轴是时间，Y轴是能耗值，数据超过最大值自动删除，表格实时加载能耗数据。