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)