在WinRT界面控件Essential Studio for WinRT(XAML)中有30多種不同的圖表類型，并能很好的支持大數(shù)據(jù)的渲染和一些圖表的操作功能。本文主要詳解如何在Essential Studio for WinRT(XAML)創(chuàng)建圖表。

創(chuàng)建步驟如下所示：

從項目中打開添加的參考窗口：

1、選擇：Windows ­­­> Extensions > Syncfusion controls for WinRT XAML

2、添加下面的命名空間到你的XAML頁面上：

XAML

xmlns:Syncfusion="using:Syncfusion.UI.Xaml.Charts"

初始化圖表

通過下面的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>

創(chuàng)建一個示例數(shù)據(jù)來源

由于在上面的步驟中實時給出一個空的折線圖，我們需要添加一些數(shù)據(jù)到圖表上繪制。在這一步中，我們創(chuàng)建一個示例數(shù)據(jù)源，數(shù)據(jù)源必須實現(xiàn)IEnumerable接口。

C#

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;
  }
 }

綁定數(shù)據(jù)到ChartSeries

需要添加上面的UsersViewModel到圖表的DataContext，綁定數(shù)據(jù)源到到線形系列的ItemsSource，然后使用XBindingPath和YBindingPath繪制數(shù)據(jù)。

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 >

最后圖表就創(chuàng)建成功了，如下所示：

下載Essential Studio for WinRT(XMAL)最新版