2014年03月21日

2014年03月05日

WPF Chart: 円グラフの色を変更する。

   このエントリーをはてなブックマークに追加 Clip to Evernote
WPFのChartの話題も今回が最後です。

円グラフの色を変更してみましょう。
まずは、デフォルトの色を使った円グラフ

piechart1

データとしては、これまでに何度も出てきたブラウザの割合を使います。
C# のコードを示します。

using System.Collections.Generic;
using System.Windows;

namespace CustomColorPieChart {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }

    public class MyData {
        public MyData() {
            Items = new List<MyItem> {
                new MyItem { Rate=45.9, Browser="IE" },
                new MyItem { Rate=30.4, Browser="Chrome" },
                new MyItem { Rate=19.3, Browser="Firefox" },
                new MyItem { Rate=2.3, Browser="Opera" },
                new MyItem { Rate=2.1, Browser="Other" },
            };
        }
        public List<MyItem> Items { get; set; }
    }

    public class MyItem {
        public double Rate { get; set; }
        public string Browser { get; set; }
    }
}

標準の色を使うXAMLは以下の通りです。

<Window x:Class="CustomColorPieChart.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:local="clr-namespace:CustomColorPieChart"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MyData x:Key="BrowserUser" />
    </Window.Resources>
    <Grid Opacity="1" >
        <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource BrowserUser}}"
            Margin="10" Name="chart1"
            Title="言語別人数">
            <chartingToolkit:PieSeries
                ItemsSource="{Binding Items}"
                DependentValueBinding="{Binding Rate}"
                IndependentValueBinding="{Binding Browser}" />
        </chartingToolkit:Chart>
    </Grid>
</Window>

この標準の円グラフの色を以下のように変更してみます。

pieChart2


円グラフの各パートの色を変更するには、XAMLの PieSeriesクラスのPaletteプロパティに、 下記に示すように、ResourceDictionaryCollectionを設定してあげます。
ここでは、7つのパートの色(RadialGradientBrush)を設定しています。

以下、XAMLです。

<Window x:Class="CustomColorPieChart.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:local="clr-namespace:CustomColorPieChart"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MyData x:Key="BrowserUser" />
        <visualizationToolkit:ResourceDictionaryCollection x:Key="MyPalette">
            <!-- 0 -->
            <ResourceDictionary>
                <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                    <GradientStop Color="#FFCFECF5"/>
                    <GradientStop Color="#FF3891A7" Offset="1"/>
                </RadialGradientBrush>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="{StaticResource Background}"/>
                </Style>
            </ResourceDictionary>
            <!-- 1 -->
            <ResourceDictionary>
                <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                    <GradientStop Color="#FFF5CFCF"/>
                    <GradientStop Color="#FFE17B7C" Offset="1"/>
                </RadialGradientBrush>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="{StaticResource Background}"/>
                </Style>
            </ResourceDictionary>
            <!-- 2 -->
            <ResourceDictionary>
                <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                    <GradientStop Color="#FFFFF1C7"/>
                    <GradientStop Color="#FFFEB80A" Offset="1"/>
                </RadialGradientBrush>

                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="{StaticResource Background}"/>
                </Style>
            </ResourceDictionary>
            <!-- 3 -->
            <ResourceDictionary>
                <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                    <GradientStop Color="#FF98C1DC"/>
                    <GradientStop Color="#FF0271AE" Offset="1"/>
                </RadialGradientBrush>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="{StaticResource Background}"/>
                </Style>
            </ResourceDictionary>
            <!-- 4  -->
            <ResourceDictionary>
                <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                    <GradientStop Color="#FFE2FCAB"/>
                    <GradientStop Color="#FF84AA33" Offset="1"/>
                </RadialGradientBrush>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="{StaticResource Background}"/>
                </Style>
            </ResourceDictionary>
            <!-- 5 -->
            <ResourceDictionary>
                <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                    <GradientStop Color="#FFF2BAA4"/>
                    <GradientStop Color="#FFC0654C" Offset="1"/>
                </RadialGradientBrush>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="{StaticResource Background}"/>
                </Style>
            </ResourceDictionary>
            <!-- 6 -->
            <ResourceDictionary>
                <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                    <GradientStop Color="#FFB8CEFC"/>
                    <GradientStop Color="#FF475A8D" Offset="1"/>
                </RadialGradientBrush>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="{StaticResource Background}"/>
                </Style>
            </ResourceDictionary>
        </visualizationToolkit:ResourceDictionaryCollection>
    </Window.Resources>
    <Grid Opacity="1" >
        <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource BrowserUser}}"
            Margin="10" Name="chart1"
            Title="言語別人数">
            <chartingToolkit:PieSeries
                ItemsSource="{Binding Items}"
                DependentValueBinding="{Binding Rate}"
                IndependentValueBinding="{Binding Browser}"
                Palette="{StaticResource MyPalette}"  />
        </chartingToolkit:Chart>
    </Grid>
</Window>
  
Posted by gushwell at 21:03Comments(0)TrackBack(0)

2014年02月27日

WPF Chart: 横棒グラフの横棒部分の色を変更する

   このエントリーをはてなブックマークに追加 Clip to Evernote
Chratコントロールの各SeriesクラスのDataPointStyleプロパティのBackgroundプロパティ値を変更することで、横棒グラフの横棒部分の色を変更することができます。
ここでは、BarSeriesのバーの色を変更する例を示します。

オリジナル
BarColorCustom0

変更後
BarColorCustom

リソースの定義(このサンプルでは、Grid.Resourcesに定義)で、DataPointのスタイルを定義しています。ここでは、LineGradientBrushでグラデーションのブラシを作成し、Backgroundの値にセットしています。
このリソースを、BarSeriesのDataPointStyleに割り当てることで、バーの色を変更することができます。
同様のやり方で、AreaSeries、BubbleSeries、ColumnSeries、LineSeries、ScatterSeries のチャートの色を変更することができます。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:DataVisualizationSample"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        x:Class="DataVisualizationSample.MainWindow"
        Title="MainWindow" Height="300" Width="425">
    <Window.Resources>
        <my:MyData x:Key="myData" />
    </Window.Resources>
    <Grid>
        <Grid.Resources>
            <Style
                x:Key="myDataPointColor"
                TargetType="chartingToolkit:DataPoint">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="LightCyan" Offset="0.00" />
                            <GradientStop Color="RoyalBlue" Offset="0.45" />
                            <GradientStop Color="MediumBlue" Offset="1.0" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <chartingToolkit:Chart  
            Title="Sample Chart"
            DataContext="{Binding Mode=OneWay, Source={StaticResource myData}}" >
            <chartingToolkit:BarSeries
                Title="販売額"
                  ItemsSource="{Binding Items}" 
            DataPointStyle="{StaticResource myDataPointColor}"
                DependentValuePath="Value" IndependentValuePath="Year" />
        </chartingToolkit:Chart>
    </Grid>
</Window>


C#側では、チャートにバインドするデータを用意しているだけです。

using System.Collections.Generic;
using System.Windows;

namespace DataVisualizationSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }

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

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

  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

2014年02月19日

WPF Chart: INotifyPropertyChangedを実装し、リアルタイムでグラフを変化させる

   このエントリーをはてなブックマークに追加 Clip to Evernote
チャートにおいても、バインドするデータクラスにINotifyPropertyChangedインターフェースを実装することで、データの変更を、チャートに反映ささせるこっとができます。
これにより、データの変更にリアルタイムに追随する動きのあるグラフを作ることができます。
まずは、バインドするデータクラスをC#で定義します。
ここでは、選挙の候補者名とその得票数を表すクラスとしましょう。
変化するのは、得票数だけなので、NotifyPropertyChanged を呼び出すのは、Votesプロパティのみとします。

public class Candidacy : INotifyPropertyChanged {
    public string Name { get; set; }
    private int _votes;
    public int Votes {
        get { return _votes; }
        set {
            if (value != this._votes) {
                this._votes = value;
                NotifyPropertyChanged("Votes");
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String info) {
        if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }
}

今回のグラフでは、複数の候補者を扱いますので VotesCastList クラスを定義します。

public class VotesCastList {
    public VotesCastList() {
        Candidacies = new ObservableCollection<Candidacy> {
            new Candidacy { Name="候補者A", Votes=12300 },
            new Candidacy { Name="候補者B", Votes=43000 },
            new Candidacy { Name="候補者C", Votes=35000 },
            new Candidacy { Name="候補者D", Votes=58000 },
        };
    }
    public ObservableCollection<Candidacy> Candidacies { get; set; }
}

サンプルプログラムの都合上、初期値は、コンストラクタで与えています。
このデータを横棒グラフで表示しようと思います。

<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="INotifyPropertyChangedSample.MainWindow"
        xmlns:local="clr-namespace:INotifyPropertyChangedSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:VotesCastList x:Key="myList" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource myList}}" 
            Name="chart1" Title="得票数" 
            Margin="10,10,10,50">
            <chartingToolkit:BarSeries
                Title="得票数"
                DependentValuePath="Votes"
                IndependentValuePath="Name"
                ItemsSource="{Binding Candidacies}" >
            </chartingToolkit:BarSeries>
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:LinearAxis
                    Orientation="X"
                    Maximum="100000"
                    Minimum="0"
                    Interval="20000" />
            </chartingToolkit:Chart.Axes>
        </chartingToolkit:Chart>
        <Button Content="Button" HorizontalAlignment="Left" Margin="432,286,0,0"
                VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
    </Grid>
</Window>

ウィンドウに配置したボタンクをリックした時にデータを変化させます。

private void Button_Click_1(object sender, RoutedEventArgs e) {
    VotesCastList vl = this.chart1.DataContext as VotesCastList;
    vl.Candidacies[0].Votes += 1000;
    vl.Candidacies[1].Votes += 5500;
    vl.Candidacies[2].Votes += 9000;
    vl.Candidacies[3].Votes += 3500;
}

これで、ボタンをクリックすると、データが変更されると同時にグラフのバーが伸びていきます。

初期状態
INotifyPropertyChangedSample1

ボタンを2度クリックした後の状態
INotifyPropertyChangedSample2
  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

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; }
    }
}

  
Posted by gushwell at 22:29Comments(0)TrackBack(0)

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


  
Posted by gushwell at 21:14Comments(0)TrackBack(0)

2014年01月29日

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

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回は、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
  
Posted by gushwell at 22:00Comments(0)TrackBack(0)

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; }
    }
}
  
Posted by gushwell at 22:00Comments(0)TrackBack(0)