2013年11月10日

WPF Chart: はじめてのチャート (縦棒グラフ)

   このエントリーをはてなブックマークに追加 Clip to Evernote
1年以上続けてきたWPFサンプルですが、ひとまず終わりにして、今度は、WPFのチャート機能に挑戦します。
WPFでチャート(グラフ)を表示するには、WPF toolkitを使う必要があるのですが、 この WPF toolkitは、WPF4には対応していないみたいです。
.NET Framework4.xから、.NET Framework2ベースのアセンブリを呼び出すこともできますので、 WPF4から、WPF3.5用の WPF toolkitを使うこともできるのかも知れませんが試してません。
どうせならば、WPF4に対応したものを使いたい。

なので、WPF4でチャートを使う方法はないかなーと、Webをさまよっていたら、見つかりました。

MSDN Blogs の Delay's Blog にWPF4に対応したChartコントロールがアップロードされています。
Bitbucketにも、WPF4に対応した、WPF-Toolkitが登録されているようですが、 今回は、前述のライブラリを利用して、チャートのサンプルを示していこうと思います。


■準備

では、早速、ダウンロードしましょう。まず、以下のURLにアクセスします。

http://blogs.msdn.com/b/delay/archive/2010/04/20/phone-y-charts-silverlight-wpf-data-visualization-development-release-4-and-windows-phone-7-charting-sample.aspx

表示されたページを少しスクロールすると以下の文言がありますので、これをクリックします。ダウンロードが開始されます。

[Click here to download the SilverlightWpfDataVisualization solution including complete source code and pre-compiled binaries for all platforms.]

すると、SilverlightWpfDataVisualization.zip がダウンロードされますので、このzipファイルを展開します。
展開した中に、Binariesフォルダがあり、その下に、WPF4フォルダがあります。
この中の、System.Windows.Controls.DataVisualization.Toolkit.dll が、Chartコントロールが入ったアセンブリファイルになります。
これをプロジェクトの参照設定に追加すれば、Chartが利用可能になります。

この System.Windows.Controls.DataVisualization.Toolkit.dll ファイルを 任意のフォルダに置いておきます。


■プロジェクトの作成

これで準備は整いましたので、簡単な縦棒グラフを描いてみましょう。
プロジェクトの新規作成で、WPFアプリケーションプロジェクトを作成します。
プロジェクトの名前は、ColumnChartSampleとでもしましょう。


■Toolkitをツールボックスへ追加

次に、 Visual Studioのツールボックスウインドウの空白部分を右クリックし、メニューから「タブの追加」を選びます。

ColumnChartSample1

新しいタブができますので、名前を WPFChartとしてください。
先ほどダウンロードしたSystem.Windows.Controls.DataVisualization.Toolkit.dll をエクスプローラから、 WPFChartタブの上にドラッグ&ドロップします。
ドラッグ&ドロップすると、System.Windows.Controls.DataVisualization.Toolkit.dll内にある チャートコントロールが、ツールボックスに追加されます。

ColumnChartSample2


■デザイナーでXAMLを編集

ツールボックスから、Chartコントロールを デザイナー画面の MainWondow の貼り付けます。 これでチャートを表示する枠ができました。
System.Windows.Controls.DataVisualization.Toolkit.dll の参照設定はこれで自動で行われます。

ColumnChartSample3

次に、ColumnSeries コントロールを、先ほど貼り付けた Chartコントロール画面の上にドラッグ&ドロップします。
Chart、ColumnSeries のレイアウト関連のロパティを変更し、表示を整えます。

ColumnChartSample4

この時点のXAMLを示します。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        x:Class="ColumnChartSample.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <chartingToolkit:Chart Margin="20" >
            <chartingToolkit:ColumnSeries />
        </chartingToolkit:Chart>
    </Grid>
</Window>


■モデル(チャートの元データ)の作成

次にやることは、グラフに表示する数値データを用意することです。
ここでは、C#のコードに直書きします。

public class MyData {
    public MyData() {
        Items = new List<MyItem> {
            new MyItem { Year=2008, Value=1800 },
            new MyItem { Year=2009, Value=2800 },
            new MyItem { Year=2010, Value=2500 },
            new MyItem { Year=2011, Value=3500 },
            new MyItem { Year=2012, Value=3800 },
        };
    }
    public List<MyItem> Items { get; set; }
}
public class MyItem {
    public int Year { get; set; }
    public int Value { get; set; }
}


■モデルをChartにバインド

ここまでできれば、あとば、 ColumnSeries の ItemsSource にバインドしてあげるだけです。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:ColumnChartSample"
        xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        x:Class="ColumnChartSample.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <my:MyData />
    </Window.DataContext>
    <Grid>
        <chartingToolkit:Chart Margin="20" >
            <chartingToolkit:ColumnSeries 
                ItemsSource="{Binding Items, Mode=OneWay}"
                DependentValuePath="Value"
                IndependentValuePath="Year" />
        </chartingToolkit:Chart>
    </Grid>
</Window>


なお、バインドするときに、Year, Value がIndependentValue、DependentValue の どちらにあたるのかを指定しておきます。
IndependentValueはなんと約すのでしょうか? 独立値かな。
DependentValue は、従属値?
日本語でなんていうかは置いといて、3500とか、3800という値は、それ自身のみでは意味を持たず、 年に従属している、一方、2011, 2012という年を表す値はそれ自身が独立して意味を持つという ことを理解できれば、

DependentValuePath="Value"
IndependentValuePath="Year"

という記述が何を意味しているのかが分かると思います。
物理的な X軸、Y軸を表しているわけではありません。


■プログラムの実行

これで完成です。
F5キーを押して実行してみましょう。

ColumnChartSample5

うまくいきました。
あっ、でも右側の凡例の「Series 1」というのが気になりますね。これは、ColumnSeries にTtileプロパティを設定することで、変更できます。 それとついでに、Chart コントロールの Title プロパティにも値を設定しておきましょう。
<chartingToolkit:Chart Margin="20" Title="縦棒グラフのサンプル">
    <chartingToolkit:ColumnSeries 
        ItemsSource="{Binding Items, Mode=OneWay}"
        DependentValuePath="Value"
        IndependentValuePath="Year" 
        Title="売上数量"
        />
</chartingToolkit:Chart>

ColumnChartSample6

次回以降、横棒グラフ、折れ線グラフ、円グラフおよび、グラフ表示のカスタマイズについて サンプルを順次掲載していく予定です。

ちなみに、ここで示すサンプルコードは、WPF3.5でもそのまま動作するはずです。


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52336849