2016年5月1日日曜日

WPF toolkitの拡張 円グラフを使う方法

WPFはデフォルトでは円グラフなどを使用してデータを表示することができない。

円グラフ等を使用可能にするためにはtoolkitを拡張する必要がある。

以下のように、プロジェクト名を右クリック→NuGetパッケージの管理(N)を選択する。


そうしたらsystem windows controls datavisualizationで検索する。すると以下の赤い丸で囲まれているtoolkitがヒットするはずなので、これをインストールする。


できたらこれを以下のようにReferenceに追加する。


つぎにToolboxで右クリックする。するといくつかリストが表示されるのでChoose Items...を選択。


そうしたら以下のようにPieSeriesを選択する。

これで円グラフが使用可能になる。他にもいろいろなグラフが使えるようになる。

ちなみに変数をデータソースに使用するためにはxmlを以下のように書く必要がある。
まず以下のようにDVCで呼び出せるようにする。

コピー用:
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"


次に円グラフの設定をする。
コピー用:
            <DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart"
             Background="LightSteelBlue" Margin="12,472,0,10" HorizontalAlignment="Left" Width="721">
                <DVC:Chart.Series>
                    <DVC:PieSeries Title="Expense"
                      IndependentValueBinding="{Binding Path=Key}"
                      DependentValueBinding="{Binding Path=Value}"
                      Margin="0,0,20,20"/>
                </DVC:Chart.Series>
            </DVC:Chart>


そうしたらC#でloadpiechartdataのようなイベントハンドラーを設定する。
こんなふうにint型の変数を設定して

こんなふうに変数を使う。
コピー用:
private void LoadPieChartData()
        {
            ((PieSeries)mcChart.Series[0]).ItemsSource =
                new KeyValuePair<string, int>[]{
                    new KeyValuePair<string, int>("Food&Drink", F),
                    new KeyValuePair<string, int>("Bills", B),
                    new KeyValuePair<string, int>("Rent", R),
                    new KeyValuePair<string, int>("Study materials", S),
                    new KeyValuePair<string, int>("Entertainment", E) };
        }

するとこのFやBなどのint型変数に数字を代入するだけで、(円グラフがロードされる毎に)円グラフにその数字が反映されるようになる。