2014年02月05日

WPF Chart:StackedColumnSeries を使い積み上げ棒グラフを表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
StackedColumnSeries を使うと積み上げ棒グラフを表示することができます。

StackedColumnSeries2

この例では、StackedColumnSeries 要素の中に4つのSeriesDefinition を定義することで、 4つの値が積み上がっていくことになります。
最初に書いたSeriesDefinition が一番上に、最後に書いたSeriesDefinitionが一番下に描画されます。

<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="StackedColumnSample.MainWindow"
        xmlns:local="clr-namespace:StackedColumnSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MyDataList />
    </Window.DataContext>
    <Grid>
        <chartingToolkit:Chart >
            <chartingToolkit:StackedColumnSeries>
                <chartingToolkit:SeriesDefinition  ItemsSource="{Binding Items}"
                                               DependentValuePath="Category1"
                                               IndependentValuePath="Label" />
                <chartingToolkit:SeriesDefinition ItemsSource="{Binding Items}" 
                                              DependentValuePath="Category2"
                                              IndependentValuePath="Label" />
                <chartingToolkit:SeriesDefinition ItemsSource="{Binding Items }" 
                                              DependentValuePath="Category3"
                                              IndependentValuePath="Label" />
                <chartingToolkit:SeriesDefinition ItemsSource="{Binding Items }" 
                                              DependentValuePath="Category4"
                                              IndependentValuePath="Label" />
            </chartingToolkit:StackedColumnSeries>
        </chartingToolkit:Chart>
    </Grid>
</Window>

C#側のコードです。

using System.Collections.Generic;
using System.Windows;
namespace StackedColumnSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class MyDataList {
        public List<MyData> Items { get; set; }
        public MyDataList() {
            Items = new List<MyData> {
                new MyData("A",40,50,20,10),
                new MyData("B",30,60,30,15),
                new MyData("C",20,55,45,18),
                new MyData("D",10,55,55,17),
                new MyData("E",10,60,70,20),
            };
        }
    }
    public class MyData {
        public MyData(string label, int v1, int v2, int v3, int v4) {
            Label = label;
            Category1 = v1;
            Category2 = v2;
            Category3 = v3;
            Category4 = v4;
        }
        public string Label { get; set; }
        public int Category1 { get; set; }
        public int Category2 { get; set; }
        public int Category3 { get; set; }
        public int Category4 { get; set; }
    }
}

なお、StackedColumnSeriesの代わりに、StackedBarSeriesを使えば、積み上げ横棒グラフを表示できます。
StackedColumnSeries




 

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

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