2013年11月27日
WPF Chart: 円グラフ (PieChart)


円グラフを表示するには、PieSeriesコンポーネントを使います。
ここではブラウザのシェアを円グラフにしてみました。(実際の市場シェア値とは異なります)

まずは、モデル側のブラウザシェアを保持するクラスのC#のコード。
KeyValuePairオブジェクトのKey部にブラウザ名をValue部にシェア割合を割り当て、 それをListに保持するようにしました。
円グラフを表示するには、PieChartコンポーネントを使います。 上記オブジェクトをChartのDataContextに設定すれば円グラフが表示できます。
XAMLです。
今回は、Windows.Resourcesを使わずに、 Chart.DataContextに直接、BrowserRateオブジェクトを割り当ててみました。
ここではブラウザのシェアを円グラフにしてみました。(実際の市場シェア値とは異なります)

まずは、モデル側のブラウザシェアを保持するクラスの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)
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/gushwell/52337149