はじめに
列チャートの棒(?)の背景色を変更に挑戦したんですが、これがちょっと面倒でした。面倒というよりも・・・分りにくかったですね。
色を変更するには
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; } }
複数列(?)チャートの場合
やり方は変わりません。
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>