2014年02月12日

WPF Chart: 帯グラフ(100%積み上げ横棒グラフ)

   このエントリーをはてなブックマークに追加 Clip to Evernote
Stacked100BarSeriesを使うと、帯グラフ(100%積み上げ横棒グラフ)を作成できます。
帯状の長方形を全体量の100ととし、各要素が占める割合をその帯を区切ることで表したグラフです。

Stacked100BarSample

各要素の各種設定値は、SeriesDefinitionで表します。
なお、Stacked100ColumnSeriesを使えば、100%積み上げ縦棒グラフにすることができます。

<Window x:Class="Stacked100BarSample.MainWindow"
        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"
        xmlns:local="clr-namespace:Stacked100BarSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MyDataList />
    </Window.DataContext>
    <Grid>
        <chartingToolkit:Chart >
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:CategoryAxis
                            Orientation="Y" >
                    <chartingToolkit:CategoryAxis.AxisLabelStyle>
                        <Style TargetType="chartingToolkit:AxisLabel">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="chartingToolkit:AxisLabel">
                                        <TextBlock Text="{TemplateBinding FormattedContent}"
                                         Margin="0,0,5,0">
                                        </TextBlock>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </chartingToolkit:CategoryAxis.AxisLabelStyle>
                </chartingToolkit:CategoryAxis>
            </chartingToolkit:Chart.Axes>

            <chartingToolkit:Stacked100BarSeries >
                <chartingToolkit:SeriesDefinition 
                    ItemsSource="{Binding Items}"
                    DependentValuePath="Element1"
                    IndependentValuePath="Label"
                    Title="要素1" />
                <chartingToolkit:SeriesDefinition
                    ItemsSource="{Binding Items}" 
                    DependentValuePath="Element2"
                    IndependentValuePath="Label"
                    Title="要素2" />
                <chartingToolkit:SeriesDefinition
                    ItemsSource="{Binding Items }"
                    DependentValuePath="Element3"
                    IndependentValuePath="Label"
                    Title="要素3"/>
                <chartingToolkit:SeriesDefinition
                    ItemsSource="{Binding Items }" 
                    DependentValuePath="Element4"
                    IndependentValuePath="Label"
                    Title="要素4"/>
            </chartingToolkit:Stacked100BarSeries>
        </chartingToolkit:Chart>
    </Grid>
</Window>

以下、C#のコードです。

using System.Collections.Generic;
using System.Windows;
namespace Stacked100BarSample {
    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;
            Element1 = v1;
            Element2 = v2;
            Element3 = v3;
            Element4 = v4;
        }
        public string Label { get; set; }
        public int Element1 { get; set; }
        public int Element2 { get; set; }
        public int Element3 { get; set; }
        public int Element4 { get; set; }
    }
}



 

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

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