Silverlight制图 - 饼图在图表上显示一个相关值
我想在饼图本身(不在图例区域中)显示相关值。 我正在使用Silverlight 4 + Silverlight 4 Toolkit(2010年4月)。Silverlight制图 - 饼图在图表上显示一个相关值
这应该是童话的常见要求,但我还没有设法找到解决办法。 我该怎么做?
<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收集与图表有关的资源。
这页面上,你可以找到,它可以帮助你的标签添加到饼图的链接: 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 ...
Thansk这么多。但是,我仍然没有设法将我的调色板应用于标记饼图。这似乎是一个已知的问题[链接](http://forums.silverlight.net/forums/p/164956/373196.aspx) – MrBob 2011-05-02 03:33:16
我尝试了几种方法使其工作,但没有任何成功。
@MrBob我意外地将背景属性设置为Canvas,我的错。再次复制'LabelDataPointStyle'样式,现在它是正确的。从你的PieSeries中移除显式的'DataPointStyle'属性,因为这些样式将被隐式应用。 – vorrtex 2011-05-02 11:33:22
这并不像你想象的那么容易。你应该重新定义PieDataPoint风格,但是之后所有东西都是单色的。要返回到多色图表,您应该重新定义里面有16种样式的Palette属性。如果你有很多代码,我可以发布如何做到这一点。 – vorrtex 2011-04-23 15:43:41
@vorrtex您可以请发布这个运行所需的PieDataPoint样式。我对使用样式代码感到舒适,我对如何完成这一任务感兴趣,因为我正在进一步研究Silverlight。非常感谢! – MrBob 2011-04-25 05:56:31
好吧,我会尝试将我现有的代码明天应用于饼图。 – vorrtex 2011-04-25 21:36:00