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



 

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

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