【问题标题】:Silverlight Toolkit ; Pie Chart ColorsSilverlight 工具包;饼图颜色
【发布时间】:2011-10-12 19:58:14
【问题描述】:

我有一个无法解决的大问题。假设我有五种不同的水果,我希望每种水果都与某种颜色相关联。假设我有三个“篮子”,其中包含零个或多个上述水果。

当我为我的三个篮子制作饼图时,每个楔形只是一些随机颜色,可能会被控件选中。怎么说呢,让蓝莓在图表中变蓝、香蕉变黄等?

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

我不在乎解决方案是在 XAML 还是代码中,只要它有效即可。

【问题讨论】:

    标签: c# silverlight silverlight-4.0 silverlight-toolkit pie-chart


    【解决方案1】:

    经过多次发誓和调查,我找到了解决方案。这里有很多活动的部分,所以我会尽可能地简短,同时仍然传达要点。

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

    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 上的值,它与独立值绑定,例如 'banana' 'grape' 或其他。这又被传递给一个值转换器。

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

    这就是您每次都能获得正确颜色的方式。如果我遗漏了任何内容或应该澄清,请告诉我,以便我进行更正。这里有很多活动部件.. =P

    【讨论】:

      【解决方案2】:

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

      一些示例来定义您自己的调色板:

      <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"
      

      【讨论】:

      • 回复:命名空间。只需使用具有所有这些不同别名的 xmlns:toolkit="schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 就可以了 SL3
      • 我尝试过这种方法,但如果由于某种原因重新加载图表,颜色的顺序不会从 #1 开始,因为它们是以“循环方式”选择的。
      【解决方案3】:

      这是我发现的: 颜色并不是真正随机的:有一个调色板序列,每 5 次重复一次(实际上数字无关紧要)。我的解决方法更简单:每次要显示新数据时,我都会重新创建饼图。这样,调色板将始终从相同的颜色开始(这意味着它永远不会改变)。这意味着您需要有一个以编程方式重建 PieChart 的方法(在 XAML 中没有它,只需有一个占位符并调用“PieChartBuilder”方法)。 我认为这是更少的代码(也更少的错误:​​))。

      【讨论】:

      • 您仍然无法控制颜色。每次数据更改时都制作一个新图表是一种愚蠢的黑客行为。此外,如果有多个饼图,您的方法将再次失败。此外,如果图表中的项目顺序/数量不同。我可以继续说下去。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-22
      • 1970-01-01
      相关资源
      最近更新 更多