WPF Chart: 円グラフ (PieChart):Gushwell's Dev Notes

2013年11月27日

WPF Chart: 円グラフ (PieChart)

円グラフを表示するには、PieSeriesコンポーネントを使います。

ここではブラウザのシェアを円グラフにしてみました。(実際の市場シェア値とは異なります）

PieChartSample

まずは、モデル側のブラウザシェアを保持するクラスのC#のコード。

public class BrowserRate {
    public List<KeyValuePair<string, double>> Items { get; set; }
    public BrowserRate() {
        Items = new List<KeyValuePair<string, double>>();
        Items.Add(new KeyValuePair<string, double>("IE", 56.6));
        Items.Add(new KeyValuePair<string, double>("Firefox", 18.3));
        Items.Add(new KeyValuePair<string, double>("Chrome", 17.8));
        Items.Add(new KeyValuePair<string, double>("Safari", 5.4));
        Items.Add(new KeyValuePair<string, double>("Opera", 1.5));
        Items.Add(new KeyValuePair<string, double>("Other", 0.4));
    }
}

KeyValuePairオブジェクトのKey部にブラウザ名をValue部にシェア割合を割り当て、それをListに保持するようにしました。

円グラフを表示するには、PieChartコンポーネントを使います。上記オブジェクトをChartのDataContextに設定すれば円グラフが表示できます。

XAMLです。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="PieChartSample.MainWindow"
        xmlns:my="clr-namespace:PieChartSample"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <chartingToolkit:Chart
            Title="ブラウザの利用割合" >
            <chartingToolkit:Chart.DataContext>
                <my:BrowserRate/>
            </chartingToolkit:Chart.DataContext>
            <chartingToolkit:PieSeries Margin="0"
                                       ItemsSource="{Binding Path=Items}"
                                       IndependentValuePath="Key"
                                       DependentValuePath="Value"  />
        </chartingToolkit:Chart>
     </Grid>
</Window>

今回は、Windows.Resourcesを使わずに、 Chart.DataContextに直接、BrowserRateオブジェクトを割り当ててみました。

Posted by gushwell at 23:00│Comments(0)│TrackBack(0)