Silverlight Toolkit;饼图颜色

本文关键字：颜色 Toolkit Silverlight | 更新日期: 2023-09-27 18:11:10

我有一个大问题，我不明白。假设我有五种不同的水果，我想把它们每一种都和一种特定的颜色联系起来。假设我有三个"篮子"，里面没有或更多上述水果。

当我为我的三个篮子制作饼状图时，每个楔形只是一些随机的颜色，可能是由对照组选择的。我怎么说呢，让图表中的蓝莓是蓝色的，香蕉是黄色的等等?

我知道这是一个奇怪的问题，但我想不出一个更简单的方法来描述它。

我不关心解决方案是在XAML或代码，只要它工作。

Silverlight Toolkit;饼图颜色

经过多次咒骂和调查，我找到了解决方案。这里有很多活动部分，所以我将在传达要点的同时尽可能地保持每个部分的简短。

对于初学者，我有一个对象集合，我试图跟踪:

public class PileOfFruit
{
  public string Name {get; set; }
  public int Count { get; set; }
}

在我的视图模型中，我有这些对象的集合。

public class BasketVM
{
...
    private ObservableCollection<PileOfFruit> _FruitBasket = new ObservableCollection<PileOfFruit>();
    public ObservableCollection<PileOfFruit> FruitBasket
    {
      get { return _FruitBasket; }
    }
...
}

在我看来，我将定义一个饼状图，它将显示篮子中水果的数量。这里最重要的因素是绑定到的模板SliceTemplate

<chartingToolkit:Chart x:Name="ExampleChart">
    <chartingToolkit:PieSeries ItemsSource={Binding FruitBasket
                               DependentValueBinding="{Binding Count}" 
                               IndependentValueBinding="{Binding Name}">
        <chartingToolkit:PieSeries.Palette>
            <visualizationToolkit:ResourceDictionaryCollection>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource SliceTemplate}"/>
                </Style>

现在，在app.xaml或其他地方，我们可以为PieDataSeries对象添加模板。密切关注Fill上的值，它被绑定到独立的值，比如"香蕉"、"葡萄"或其他什么。然后将其传递给值转换器。

<converters:FruitToColorConverter x:Key="FruitToColorConverter"/>
<ControlTemplate x:Key="SliceTemplate" TargetType="chart:PieDataPoint">
  <Path Data="{TemplateBinding Geometry}"
        Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IndependentValue, Converter={StaticResource FruitToColorConverter}}"
        Stroke="{TemplateBinding BorderBrush}">
    ....

关联的数据转换器将最终设置我们想要的颜色。如果我们这样做…

public class FruitToColorConverter : IValueConverter
{
  private SolidColorBrush Default = new SolidColorBrush(Colors.Black);
  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    if (value == null || (!(value is string))) { return Default; }
    switch (value as string)
    {
      case "Apple":
        return new SolidColorBrush(Colors.Red);
      case "BlueBerry":
        return new SolidColorBrush(Colors.Blue);
      default:
        return Default;
        ......

这就是你每次都能得到正确颜色的方法。如果我遗漏了什么或需要澄清，请让我知道，以便我更正。这里有很多可移动的部分。div = P

您可以为图表定义自己的调色板，但是当数据项出现在调色板中时，它会自动为它们选择颜色。所以没有(简单的?)方法告诉图表显示蓝莓，香蕉，黄色等。你所能做的就是告诉图表显示第一项为蓝色，第二项为黄色等，并在数据源中将蓝莓放在第一位，香蕉放在第二位等。

一些定义你自己的调色板的例子:

<chartingToolkit:Chart x:Name="ExampleChart">
    <chartingToolkit:PieSeries>
        <chartingToolkit:PieSeries.ItemsSource >
            <toolkit:ObjectCollection>
                <sys:Double>1</sys:Double>
                <sys:Double>2.3</sys:Double>
                <sys:Double>3.5</sys:Double>
                <sys:Double>5</sys:Double>
            </toolkit:ObjectCollection>
        </chartingToolkit:PieSeries.ItemsSource >
        <chartingToolkit:PieSeries.Palette>
            <visualizationToolkit:ResourceDictionaryCollection>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="Red"/>
                </Style>
            </ResourceDictionary>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="Green"/>
                </Style>
            </ResourceDictionary>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="Blue"/>
                </Style>
            </ResourceDictionary>
            </visualizationToolkit:ResourceDictionaryCollection>
        </chartingToolkit:PieSeries.Palette>
    </chartingToolkit:PieSeries >
</chartingToolkit:Chart >

编辑:有趣的名字:

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"

以下是我的发现:颜色并不是随机的:有一系列的调色板，每5次重复一次(数量实际上并不重要)。我的解决方法更简单:每当有新数据要显示时，我就重新创建piechart。这样，调色板将始终从相同的颜色开始(这意味着它永远不会改变)。这意味着您需要有一个方法以编程方式重建您的PieChart(在XAML中不需要它，只需有一个占位符并调用"PieChartBuilder"方法)。我认为这是更少的代码(也更少的bug:))。

相关文章：