2013年11月17日

WPF Chart:横棒グラフ (BarChart)

  
今回は横棒グラフに挑戦です。
といっても、縦棒グラフと横棒グラフの違いは、ColumnSeriesをBarSeriesに変えるだけなのですが… データソースは、前回と同じものを利用します。

BarChart

その他の部分でもXAMLに手を加えてみました。

以下XAMLです。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:BarChartSample"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="BarChartSample.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:MyData x:Key="myData" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart 
            Title="Sample Chart"
            DataContext="{Binding Mode=OneWay, Source={StaticResource myData}}" >
            <chartingToolkit:BarSeries
                Title="売上数量"
                  ItemsSource="{Binding Items}"
                DependentValuePath="Value" IndependentValuePath="Year" />
        </chartingToolkit:Chart>
    </Grid>
</Window>

BarSeries以外で前回と異なるのは、MyDataオブジェクトを、Window.DataContextに設定するのではなく、 Windows.Resourcesにリソースとして登録しておき、Chartコンポーネントの DataContextに設定している点です。
どちらが良いかは意見の分かれるところですが、MyDataオブジェクトが、グラフのViewに直結した クラスだとすれば、こちらのほうが良いのかなという気もします。

今回も、ChartとBarSeriesのTitleプロパティを設定しました。
これでチャートの全体のタイトルと、凡例のタイトルを設定することができます。
DependentValuePath、IndependentValuePathの設定は、横棒グラフと同じです。 これが、X軸、Y軸という指定だったら、こうはいきませんね。

ColumnChartとダブりますが、MyDataクラスも掲載しておきます。

    public class MyData {
        public MyData() {
            Items = new List<MyItem> {
                new MyItem { Year=2008, Value=1800 },
                new MyItem { Year=2009, Value=2800 },
                new MyItem { Year=2010, Value=2500 },
                new MyItem { Year=2011, Value=3500 },
                new MyItem { Year=2012, Value=3800 },
            };
        }
        public List<MyItem> Items { get; set; }
    }

    public class MyItem {
        public int Year { get; set; }
        public int Value { get; set; }
    }



 

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

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