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)