チャートの色を変更する

はじめに

列チャートの棒(?)の背景色を変更に挑戦したんですが、これがちょっと面倒でした。面倒というよりも・・・分りにくかったですね。

色を変更するには

Chart クラスの StylePalette プロパティを使えば可能です。以下に、作成したサンプルコードを紹介します。

XAML
<UserControl x:Class="ChartSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
    xmlns:DataVisualization="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"
    xmlns:Charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Charting:Chart Title="ノート PC 売上" x:Name="_chart">
        
            <!--StylePalette というのを使用して背景色を指定できる-->
            <Charting:Chart.StylePalette>
                <DataVisualization:StylePalette>
                
                    <!--列チャートの棒(?)に適用するスタイルを指定-->
                    <Style TargetType="Control">
                        <Setter Property="Background" Value="Pink"/>
                    </Style>
                    
                </DataVisualization:StylePalette>
            </Charting:Chart.StylePalette>
            
            <Charting:Chart.Series>
                
                <!--VAIO の売上を表示する列-->
                <Charting:ColumnSeries
                    Title="VAIO"
                    ItemsSource="{Binding}"
                    IndependentValueBinding="{Binding Date}"
                    DependentValueBinding="{Binding Sales}"/>
                
            </Charting:Chart.Series>            
        </Charting:Chart>
    </Grid>
</UserControl>
チャートにデータバインド
public partial class Page : UserControl
{
    public class Product
    {
        public string Name { get; set; }
        public DateTime Date { get; set; }
        public decimal Sales { get; set; }
    }

    public Page()
    {
        InitializeComponent();

        // VAIO の売上
        Product[] vaioSales = new Product[]
        {
            new Product{Name="VAIO",Date=new DateTime(2008,4,1),Sales=100000},
            new Product{Name="VAIO",Date=new DateTime(2008,5,1),Sales=70000},
            new Product{Name="VAIO",Date=new DateTime(2008,6,1),Sales=120000},
        };

        // チャートにデータをバインド
        _chart.DataContext = vaioSales;
    }
}
実行

f:id:griefworker:20081212153527p:image
色がピンクになりました^^

複数列(?)チャートの場合

やり方は変わりません。

XAML

複数列のカラムチャートを表示する』で作成した XAML を修正します。

<UserControl x:Class="ChartSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
    xmlns:DataVisualization="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"
    xmlns:Charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Charting:Chart Title="ノート PC 売上" x:Name="_chart">
            <Charting:Chart.StylePalette>
                <DataVisualization:StylePalette>
                
                    <!--VAIO はダークグレー-->
                    <Style TargetType="Control">
                        <Setter Property="Background" Value="DarkGray"/>
                    </Style>
                    
                    <!--Lavie はピンク-->
                    <Style TargetType="Control">
                        <Setter Property="Background" Value="Pink"/>
                    </Style>
                    
                    <!--FMV はスカイブルー-->
                    <Style TargetType="Control">
                        <Setter Property="Background" Value="SkyBlue"/>
                    </Style>
                    
                </DataVisualization:StylePalette>
            </Charting:Chart.StylePalette>
            <Charting:Chart.Series>
                
                <!--VAIO の売上を表示する列-->
                <Charting:ColumnSeries
                    Title="VAIO"
                    ItemsSource="{Binding}"
                    IndependentValueBinding="{Binding Date}"
                    DependentValueBinding="{Binding Sales}"/>
                
                <!--Lavie の売上を表示する列-->
                <Charting:ColumnSeries
                    Title="Lavie"
                    ItemsSource="{Binding}"
                    IndependentValueBinding="{Binding Date}"
                    DependentValueBinding="{Binding Sales}"/>
                
                <!--FMV の売上を表示する列-->
                <Charting:ColumnSeries
                    Title="FMV"
                    ItemsSource="{Binding}"
                    IndependentValueBinding="{Binding Date}"
                    DependentValueBinding="{Binding Sales}"/>
                
            </Charting:Chart.Series>            
        </Charting:Chart>
    </Grid>
</UserControl>
再び実行

データをバインドするコードは修正していないので割愛。
f:id:griefworker:20081212153708p:image
ダークグレー、ピンク、スカイブルーのバーが表示されていますね。
本日はこれまで。