dragan10

The Silverlight Geek - グラフ – Silverlight Toolkit

2009-01-18 03:36:03

OK、Silverlight Toolkitのいろいろな側面を気ままに見て見ることにしましょう。もっとシステマティックに作成しているビデオの補完ということで・・・

Silverlight Toolkitについて最初に知っておくべきことは、あまり使われていないすばらしいリソースが2つあることです:CodeplexのSilverlight Tookitのホームページ(ここでソースとサンプルが手に入ります)と、Silverlight.netにあるSilverlight Toolkit専門のフォーラムです(フォーラム35)。

今日は、グラフをいくつか見てみることから始めましょう。

すべてのグラフを見ればすぐに気づくのは、それらの動作がほとんど同じだと言うことでしょう:IndependentValueとDependentValue として指定しなければならないデータセットがあり(これについてはすぐ後で説明します)、これらの値を供給するためのItemSourceがあります。タイトルが必要で、ほとんどの場合幅と高さと名前が必要です。

まだまだありますが、この先に進むには十分でしょう。

 

IndependentValueとDependentValue

 

これらの用語の技術的な定義は置いておいて、グラフを見ればIndependentValues(IVs)が計りたいものの名前で、IndependentValues(DVs)がそれぞれのIVsに対する数値だということがわかるでしょう(これは厳密な定義ではありませんが、十分に役に立ちます)。

これは、棒グラフを見てもらえばすぐ分かります。

このグラフでは、ActivityがIndependentValueで、TimeがDependentValueです。

このグラフのIndependentValueやDependentValueに別のラベルをつけることもできますし、それで依然として意味も通ります。

これらの新しいラベルで見ているのは、私の1973年の毎月の予算かもしれません。

Chart Controlsでチャートを作るのは驚くほど簡単です。最初にデータを作ります。私はこのとき、クラスにデリゲートするのが好みです。プログラムの外からデータを取得するのに似ているでしょう(例えばwebサービスから)。

そして、プロジェクトにExpenseを追加します。

using System.Collections.Generic;

namespace SimpleCharts
{
  public class Expense
  {
    public string Name { get; set; }
    public double Value { get; set; }

    public static List<Expense> GetExpenses()
    {
      List<Expense> expenses = new List<Expense>()
      {
        new Expense() { Name = "Rent",   Value = 175.63 },
        new Expense() { Name = "Books",  Value = 102.77 },
        new Expense() { Name = "Food",   Value = 49.33 },
        new Expense() { Name = "Music",  Value = 75 },
        new Expense() { Name = "Else",   Value = 22 }
      };
      return expenses;
    }
  }
}

このシンプルなクラスは、2つのpublicなプロパティと、値を生成する1つのstaticなメソッドを持っています。

 

Xamlでチャートを作成する

 

私が作成した最初のバージョンでは、単に棒グラフをXamlで作成し、次にコードから出費のコレクションをItemSouceにセットしました。Xamlは以下の通りです。

<UserControl x:Class="SimpleCharts.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Microsoft.Windows.Controls;
               assembly=Microsoft.Windows.Controls"
    xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;
              assembly=Microsoft.Windows.Controls.DataVisualization"             
    Width="800" Height="500">

    <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
      <RowDefinition Height="8*" />
      <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*" />
      <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

      <charting:Chart x:Name="Budget" Margin="10">
      <charting:Chart.Series>
        <charting:ColumnSeries
          Title="1973"
          IndependentValueBinding="{Binding Name}"
          DependentValueBinding="{Binding Value}" />
      </charting:Chart.Series>
    </charting:Chart>
      
   </Grid>
</UserControl>

Toolkitから取った2つのアセンブリへの参照を示す2つの名前空間を追加していることに注意してください。DataVisualization.dllとControls.dllがそうです。

Gridは2つの行(80/20)と2つの列(50/50)に分けてありますが、今のところは左上だけを使います。チャートには名前がつけてあり、この例では一つしかありませんが、系列があります。IVは各オブジェクトのNameに、DVはValueにバインドします。オブジェクトは、(ItemSourceを使って)コードから渡してやります。

 

チャートへデータをバインドする

 

このチャートへデータをバインドしているコードはPage.xaml.csにあります。

 

public Page()
{
  InitializeComponent();
  ColumnSeries cs = Budget.Series[0] as ColumnSeries;
  cs.ItemsSource = Expense.GetExpenses();
}

Budget という名前にしたコントロールから、その系列のコレクションの最初のメンバーを取得します。その型はColumnSeriesということは分かっています。そのColumnSeriesのItemsSourceを、staticメソッドのGetExpensesからの返値にします。この値が、2つのpublicなプロパティ、NameとValueを持っているExpenseオブジェクトのリストでということを覚えておいてください。 それらの2つのプロパティが、Budgetコントロールが求めているものです。このデータに基づいたグラフはこうなります。

円グラフを追加する

 

すべてのチャートは同じように動くので、円グラフの追加も簡単です。棒グラフをカット&ペーストして、名前を変えて、チャートの系列をColumnSeriesからPieSeriesに変えます。あと変えなければならないのは、Grid.Columnだけです。

<charting:Chart x:Name="BudgetAsPieChart" Grid.Column="1"
      Margin="10">
  <charting:Chart.Series>
    <charting:PieSeries
      Title="1973"
      IndependentValueBinding="{Binding Name}"
      DependentValueBinding="{Binding Value}" />
  </charting:Chart.Series>
</charting:Chart>

データをバインドするコードはほとんど同じです。

 
public Page()
{
  InitializeComponent();
  ColumnSeries cs = Budget.Series[0] as ColumnSeries;
  PieSeries ps = BudgetAsPieChart.Series[0] as PieSeries;
  ps.ItemsSource = cs.ItemsSource = Expense.GetExpenses();
}

これで、円グラフは右上に入ります。

データの進化

最後に、もうちょっと面白くするために、Expenseにもう一つのstatisメソッドを追加しましょう。このメソッドは次の年のデータを返すもので、ページにつけたボタンをクリックすると、チャートのItemsSourceを新しいデータに切り替えます。その効果はとても満足すべきもので、チャートが元々の年から次の年へと変化します。

Expense.csに追加するメソッドは以下の通りです。

 public static List<Expense> GetNewExpenses()
 {
   List<Expense> expenses = new List<Expense>()
   {
     new Expense() { Name = "Rent",   Value = 375.63 },
     new Expense() { Name = "Books",  Value = 102.77 },
     new Expense() { Name = "Food",   Value = 149.33 },
     new Expense() { Name = "Music",  Value = 45 },
     new Expense() { Name = "Else",   Value = 222.56 }
   };
   return expenses;
 }

Xamlの変更分は以下の通りです(Gridの終了タグの直前に追加します)

<Button x:Name="Change" Content="Change"
    FontSize="18" Width="120" Height="30"
    Grid.Row="1"/>

最後に、Page.xaml.csの変更分です。

public partial class Page : UserControl
{
  public Page()
  {
    InitializeComponent();
    ColumnSeries cs = Budget.Series[0] as ColumnSeries;
    PieSeries ps = BudgetAsPieChart.Series[0] as PieSeries;
    ps.ItemsSource = cs.ItemsSource = Expense.GetExpenses();
    Change.Click += new RoutedEventHandler( Change_Click );
  }

  void Change_Click( object sender, RoutedEventArgs e )
  {
    ColumnSeries cs = Budget.Series[0] as ColumnSeries;
    cs.Title = "1974";
    cs.ItemsSource = Expense.GetNewExpenses();

    PieSeries ps = BudgetAsPieChart.Series[0] as PieSeries;
    ps.Title = "1974";
    ps.ItemsSource = Expense.GetNewExpenses();
  }
}

[gifファイルの関係で色がおかしいのをお詫びします]

 

クロス・プラットフォーム

 

最後に、このアプリケーションはMacでも開くことができて、同じチャートが同じように振る舞い、元々Mac用であったかのように全く同じに表示されます。

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]