2014年01月22日

WPF Chart: 2種類の棒グラフを表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
Chart要素の子要素として、複数の Series 要素を設定することで、下記のようなチャートを表示できます。

TowColumnSample

XAMLは、以下のようになります。
Chartの子要素として、ColumnSeries を2つ設定しています。

<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="WpfTwoColumnSeriesSample.MainWindow"
        xmlns:my="clr-namespace:WpfTwoColumnSeriesSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:MyData x:Key="myData" />
    </Window.Resources>
    <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource myData}}"
            Margin="10" Name="chart1" >
        <chartingToolkit:ColumnSeries                   
                Title="部門A"
                DependentValuePath="Value"
                IndependentValuePath="Year"
                ItemsSource="{Binding SectionA}" />
        <chartingToolkit:ColumnSeries                   
                Title="部門B"
                DependentValuePath="Value"
                IndependentValuePath="Year"
                ItemsSource="{Binding SectionB}" />
    </chartingToolkit:Chart>
</Window>

C#のコードです。

using System.Collections.Generic;
using System.Windows;
namespace WpfTwoColumnSeriesSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class MyData {
        public MyData() {
            SectionA = new List<MyItem> {
                new MyItem { Year=2009, Value=32 },
                new MyItem { Year=2010, Value=40 },
                new MyItem { Year=2011, Value=43 },
                new MyItem { Year=2012, Value=44 },
                new MyItem { Year=2013, Value=45 },
            };
            SectionB = new List<MyItem> {
                new MyItem { Year=2009, Value=10 },
                new MyItem { Year=2010, Value=12 },
                new MyItem { Year=2011, Value=20 },
                new MyItem { Year=2012, Value=27 },
                new MyItem { Year=2013, Value=36 },
            };
        }
        public List<MyItem> SectionA { get; set; }
        public List<MyItem> SectionB { get; set; }
    }
    public class MyItem {
        public int Year { get; set; }
        public int Value { get; set; }
    }
}


 

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

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