WinRT界面控件Essential Studio使用教程：图表控件-控件新闻-慧都网

WinRT界面控件Essential Studio使用教程：图表控件

原创|使用教程|编辑：郝浩|2013-06-27 11:36:51.000|阅读 307 次

概述：在WinRT界面控件Essential Studio for WinRT(XAML)中有30多种不同的图表类型，并能很好的支持大数据的渲染和一些图表的操作功能。本文主要详解如何在Essential Studio for WinRT(XAML)创建简单图表。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

初始化图表

通过下面的Syncfusion.UI.Xaml.Charts.SfChart类初始化图表：

XAML

<Syncfusion:SfChart>
</Syncfusion:SfChart>

接下来，需要声明主要轴和二级轴：

XAML

<Syncfusion:SfChart>
<Syncfusion:SfChart.PrimaryAxis>
       <Syncfusion:CategoryAxis/>
  </Syncfusion:SfChart.PrimaryAxis>
  <Syncfusion:SfChart.SecondaryAxis>
       < Syncfusion:NumericalAxis/>
  </Syncfusion:SfChart.SecondaryAxis>
</Syncfusion:SfChart >

将ChartSeries添加到图表

XAML

<Syncfusion:SfChart x:Name="Chart">
  <Syncfusion:SfChart.PrimaryAxis>
    <Syncfusion:DateTimeAxis/>
  </Syncfusion:SfChart.PrimaryAxis>
  <Syncfusion:SfChart.SecondaryAxis>
   <Syncfusion:NumericalAxis/>
  </Syncfusion:SfChart.SecondaryAxis>
  <Syncfusion:LineSeries/>
</Syncfusion:SfChart>

创建一个示例数据来源

由于在上面的步骤中实时给出一个空的折线图，我们需要添加一些数据到图表上绘制。在这一步中，我们创建一个示例数据源，数据源必须实现IEnumerable接口。

public class UserProfile
 {
   public DateTime TimeStamp { get; set; }
 
   public double NoOfUsers { get; set; }
 } 
 
public class UsersViewModel
 {
 public UsersViewModel()
  {
   this.UsersList = new ObservableCollection<UserProfile>();
   DateTime date = DateTime.Today;
   UsersList.Add(new UserProfile { TimeStamp=date.AddHours(0.5),NoOfUsers=1000});
   UsersList.Add(new UserProfile { TimeStamp=date.AddHours(0.5),NoOfUsers = 5000 });
UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });
   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 4000 });
   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 2000 });
   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 1000 });
  }
 public ObservableCollection<UserProfile> UsersList
  {
    get; set;
  }
 }

绑定数据到ChartSeries

需要添加上面的UsersViewModel到图表的DataContext，绑定数据源到到线形系列的ItemsSource，然后使用XBindingPath和YBindingPath绘制数据。

XAML

<Page.DataContext>
      <UsersViewModel/>
</ Page.DataContext>
…
<Syncfusion:SfChart x:Name="Chart">
  <Syncfusion:SfChart.PrimaryAxis>
    <Syncfusion:DateTimeAxis/>
  </Syncfusion:SfChart.PrimaryAxis>
 
  <Syncfusion:SfChart.SecondaryAxis>
   <Syncfusion:NumericalAxis/>
  </Syncfusion:SfChart.SecondaryAxis>
<Syncfusion:LineSeries 
                ItemsSource="{Binding UsersList}" 
                XBindingPath="TimeStamp”
                YBindingPath="NoOfUsers">
  </Syncfusion:LineSeries>
</Syncfusion:SfChart >

最后图表就创建成功了，如下所示：

WinRT界面控件Essential Studio使用教程：图表控件