Silverlight图表 - 饼图在图表上显示依赖值 [英] Silverlight charting - Pie chart show a dependent value on the chart
问题描述
我想在饼图本身（而不是图例区域）中显示依赖值。
我使用Silverlight 4 + Silverlight 4工具包（2010年4月）。
I would like to display the dependent value on the pie chart itself(not in the Legend area). I'm using Silverlight 4 + Silverlight 4 Toolkit (April 2010).
这应该是仙女的常见请求，但我没有设法找到解。
我应该怎么做？
This should be fairy common request, but I haven't managed to find a solution. How should I do this?
<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>
推荐答案
我记得我有一个链接与图表相关的资源集合。
I have recalled that I have a link with the collection of resources related with charts.
在该页面上，您可以找到可以帮助您的链接向饼图添加标签：
LabeledPieChart
And on that page you can find the link which can help you to add labels to the pie chart: LabeledPieChart
此解决方案使用工具包 Chart 类中的派生类。虽然我说，可以创建一个类似的行为，而不创建新的类，我不认为它比使用现有的控件更容易。
This solution use the derived class from the toolkit Chart class. And although I said that it is possible to create a similar behavior without creating new classes, I don't think that it is easier than using the existing control.
无论如何可以发布显示依赖值的饼图系列的自定义样式。
所有你需要的是一种转换器，将切片的路径几何转换为左或顶部属性 Canvas 和数据点的自定义样式。
Anyway I can post the custom style of the pie series which displays the dependent value.
All that you need is some kind of converter which converts the path geometry of the slice to the Left or the Top property of the Canvas, and the custom style of the data point.
转换器：
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 class：
And a few lines of xaml inside the template of the PieDataPoint class:
<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 style：
<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}" ...
并且图表将显示为单色橙色图表。
And the chart will be displayed as one-color orange chart.
如果您不喜欢，这里是我已经展示如何更改图表的 Palette 属性的链接。
If you don't like it, here is the link where I have shown how to change the Palette property of the chart.
这是使用3种颜色的调色板示例，您可以通过类比添加其他颜色：
This is the example of the Palette with 3 colors, other colors you can add by analogy:
<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 ...
And don't forget to remove the DataPointStyle property from the series definition: <chart:PieSeries DataPointStyle="{StaticResource LabelDataPointStyle}" ...
=>
<chart:PieSeries ...
这篇关于Silverlight图表 - 饼图在图表上显示依赖值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
