Silverlight 图表 - 饼图在图表上显示相关值 [英] Silverlight charting - Pie chart show a dependent value on the chart
问题描述
我想在饼图本身(不在图例区域中)显示相关值.我使用的是 Silverlight 4 + Silverlight 4 Toolkit(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>
推荐答案
我记得我有一个 link 与收藏与图表相关的资源.
I have recalled that I have a link with the collection of resources related with charts.
在该页面上，您可以找到可以帮助您向饼图添加标签的链接:标记饼图
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 的 Left 或 Top 属性，以及数据点的自定义样式.
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();
}
}
PieDataPoint 类的模板中的几行 xaml:
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样式的完整代码:
<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 种颜色的 Palette 示例，其他颜色您可以类推:
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屋！
