2014年01月29日

WPF Chart: 2軸グラフを表示する

  
前回は、2つの棒グラフを表示する例をお見せしましたが、今度は、棒グラフと折れ線グラフの複合グラフを表示してみます。

LineAndColumn

前回のXAMLが理解できていれば、どうやるかは容易に想像できますよね。 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="LineAndColumnSample.MainWindow"
        xmlns:local="clr-namespace:LineAndColumnSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MyResults x:Key="myResults" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource myResults}}"
            Margin="10" Name="chart1"
            >
            <chartingToolkit:ColumnSeries                   
                Title="累計回数"
                DependentValuePath="TotalCount"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" />
            <chartingToolkit:LineSeries      
                Title="回数"
                DependentValuePath="Count"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" >
            </chartingToolkit:LineSeries>
        </chartingToolkit:Chart>
    </Grid>
</Window>

C#も示しておきます。
ランダムにデータを作成するようにしてみました。

using System;
using System.Collections.ObjectModel;
using System.Windows;
// 棒グラフと折れ線グラフを同時に表示する。
namespace LineAndColumnSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class MyResults {
        public ObservableCollection<MyResult> Items { get; set; }
        public MyResults() {
            Random rnd = new Random();
            Items = new ObservableCollection<MyResult>();
            var old = new MyResult();
            for (int h = 9; h < 18; h++) {
                var r = new MyResult();
                r.Hour = h;
                r.Count = rnd.Next(25, 50);
                r.TotalCount = old.TotalCount + r.Count;
                Items.Add(r);
                old = r;
            }
        }
    }
    public class MyResult {
        public int Hour { get; set; }
        public int Count { get; set; }
        public int TotalCount { get; set; }
    }
}

これを実行したのが以下の画面。

LineAndColumn0

でも、折れ線グラフが、下のほうにあって、なんだか見づらいです。 これを縦軸が左右にある 2 軸グラフにしてみます。
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="LineAndColumnSample.MainWindow"
        xmlns:local="clr-namespace:LineAndColumnSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MyResults x:Key="myResults" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource myResults}}"
            Margin="10" Name="chart1"
            >
            <chartingToolkit:ColumnSeries                   
                Title="累計回数"
                DependentValuePath="TotalCount"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" />
            <chartingToolkit:LineSeries      
                Title="回数"
                DependentValuePath="Count"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" >
                <chartingToolkit:LineSeries.DependentRangeAxis>
                    <chartingToolkit:LinearAxis
                        Orientation="Y"
                        Interval="10"
                        Minimum="0"
                        Maximum="55" />
                </chartingToolkit:LineSeries.DependentRangeAxis>
            </chartingToolkit:LineSeries>
        </chartingToolkit:Chart>
    </Grid>
</Window>

LineSeriesオブジェクトのDependentRangeAxisプロパティに、最小値、最大値、間隔等を指定したLinearAxisオブジェクトを設定しています。
これにより、折れ線グラフ用に、右側にもうひとつの縦軸を表示することができます。
この例では、折れ線グラフのY軸の値の範囲を 0 〜 55 に、その間隔を 10 に設定しています。

最後に、もう一度実行した画面を示します。

LineAndColumn


 

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

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