Silverlight制图 - 饼图在图表上显示一个相关值

Question

我想在饼图本身（不在图例区域中）显示相关值。 我正在使用Silverlight 4 + Silverlight 4 Toolkit（2010年4月）。

这应该是童话的常见要求，但我还没有设法找到解决办法。 我该怎么做？

<toolkit:Chart Name="samplePieChart" Title="Sample" Width="600"> 
        <toolkit:Chart.Series> 
         <toolkit:PieSeries Name="samplePieSeries" 
              ItemsSource="{Binding Questions}" 
              IndependentValueBinding="{Binding Name}" 
              DependentValueBinding="{Binding Count}" 
              IsSelectionEnabled="True" 
              /> 
        </toolkit:Chart.Series> 
       </toolkit:Chart> 

Answer 1

我记得我有一个link收集与图表有关的资源。

这页面上，你可以找到，它可以帮助你的标签添加到饼图的链接： LabeledPieChart

该解决方案使用派生类从工具箱Chart类。虽然我说可以在不创建新类的情况下创建类似的行为，但我不认为这比使用现有的控件更简单。

无论如何，我可以发布显示依赖值的馅饼系列的自定义样式。 所有你需要的是某种转换器，它将片的路径几何转换为Left或属性Canvas以及数据点的自定义样式。

转换器：

public class GeometryToNumberConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     var g = value as Geometry; 
     var type = parameter as string; 
     if (type == "Left") 
      return (g.Bounds.Left + g.Bounds.Right)/2.0; 
     else if (type == "Top") 
      return (g.Bounds.Top + g.Bounds.Bottom)/2.0; 
     else return null; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

和XAML的PieDataPoint类的模板中的几行：

<Canvas Background="Transparent"> 
    <TextBlock Text="{TemplateBinding FormattedDependentValue}" 
     Canvas.Left="{Binding Geometry, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GeometryToNumberConverter}, ConverterParameter=Left}" 
     Canvas.Top="{Binding Geometry, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GeometryToNumberConverter}, ConverterParameter=Top}"/> 
</Canvas> 

这里是PieDataPoint风格的全码：

<UserControl.Resources> 
    <local:GeometryToNumberConverter x:Name="GeometryToNumberConverter" /> 

    <Style x:Key="LabelDataPointStyle" TargetType="chart:PieDataPoint"> 
     <Setter Property="Background" Value="Orange"/> 
     <Setter Property="BorderBrush" Value="White"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="IsTabStop" Value="False"/> 
     <Setter Property="RatioStringFormat" Value="{}{0:p2}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="chart:PieDataPoint"> 
        <Grid 
        x:Name="Root" 
        Opacity="0"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0:0:0.1"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <DoubleAnimation 
             Storyboard.TargetName="MouseOverHighlight" 
             Storyboard.TargetProperty="Opacity" 
             To="0.6" 
             Duration="0"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0:0:0.1"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Unselected"/> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <DoubleAnimation 
             Storyboard.TargetName="SelectionHighlight" 
             Storyboard.TargetProperty="Opacity" 
             To="0.6" 
             Duration="0"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="RevealStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0:0:0.5"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Shown"> 
            <Storyboard> 
             <DoubleAnimation 
             Storyboard.TargetName="Root" 
             Storyboard.TargetProperty="Opacity" 
             To="1" 
             Duration="0"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Hidden"> 
            <Storyboard> 
             <DoubleAnimation 
             Storyboard.TargetName="Root" 
             Storyboard.TargetProperty="Opacity" 
             To="0" 
             Duration="0"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Path 
         x:Name="Slice" 
         Data="{TemplateBinding Geometry}" 
         Fill="{TemplateBinding Background}" 
         Stroke="{TemplateBinding BorderBrush}" 
         StrokeMiterLimit="1"> 
          <ToolTipService.ToolTip> 
           <StackPanel> 
            <ContentControl Content="{TemplateBinding FormattedDependentValue}"/> 
            <ContentControl Content="{TemplateBinding FormattedRatio}"/> 
           </StackPanel> 
          </ToolTipService.ToolTip> 
         </Path> 
         <Path 
         x:Name="SelectionHighlight" 
         Data="{TemplateBinding GeometrySelection}" 
         Fill="Red" 
         StrokeMiterLimit="1" 
         IsHitTestVisible="False" 
         Opacity="0"/> 
         <Path 
         x:Name="MouseOverHighlight" 
         Data="{TemplateBinding GeometryHighlight}" 
         Fill="White" 
         StrokeMiterLimit="1" 
         IsHitTestVisible="False" 
         Opacity="0"/> 
         <Canvas IsHitTestVisible="False"> 
          <TextBlock Text="{TemplateBinding FormattedDependentValue}" IsHitTestVisible="False" 
             Canvas.Left="{Binding Geometry, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GeometryToNumberConverter}, ConverterParameter=Left}" 
             Canvas.Top="{Binding Geometry, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GeometryToNumberConverter}, ConverterParameter=Top}"/> 
         </Canvas> 

        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

你可以这样应用这种风格：

<chart:PieSeries DataPointStyle="{StaticResource LabelDataPointStyle}" ... 

而图表将显示为单色橙色图表。

如果你不喜欢它，here is我已经展示了如何改变图表的Palette属性的链接。

这是调色板的有3种颜色，其他颜色的例子，你可以通过类比补充：

<datavis:ResourceDictionaryCollection x:Key="DefaultPalette"> 
     <!-- Blue --> 
     <ResourceDictionary> 
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9"> 
       <GradientStop Color="#FFB9D6F7" /> 
       <GradientStop Color="#FF284B70" Offset="1" /> 
      </RadialGradientBrush> 
      <Style x:Key="DataPointStyle" TargetType="chart:PieDataPoint" BasedOn="{StaticResource LabelDataPointStyle}"> 
       <Setter Property="Background" Value="{StaticResource Background}" /> 
      </Style> 
     </ResourceDictionary> 
     <!-- Red --> 
     <ResourceDictionary> 
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9"> 
       <GradientStop Color="#FFFBB7B5" /> 
       <GradientStop Color="#FF702828" Offset="1" /> 
      </RadialGradientBrush> 
      <Style x:Key="DataPointStyle" TargetType="chart:PieDataPoint" BasedOn="{StaticResource LabelDataPointStyle}"> 
       <Setter Property="Background" Value="{StaticResource Background}" /> 
      </Style> 
     </ResourceDictionary> 
     <!-- Light Green --> 
     <ResourceDictionary> 
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9"> 
       <GradientStop Color="#FFB8C0AC" /> 
       <GradientStop Color="#FF5F7143" Offset="1" /> 
      </RadialGradientBrush> 
      <Style x:Key="DataPointStyle" TargetType="chart:PieDataPoint" BasedOn="{StaticResource LabelDataPointStyle}"> 
       <Setter Property="Background" Value="{StaticResource Background}" /> 
      </Style> 
     </ResourceDictionary> 
    </datavis:ResourceDictionaryCollection> 

而且不要忘了从系列定义中移除DataPointStyle属性：<chart:PieSeries DataPointStyle="{StaticResource LabelDataPointStyle}" ... => <chart:PieSeries ...