使用图表内的值显示文本块

时间:2012-03-12 14:35:28

标签: silverlight styles controltemplate data-visualization silverlight-5.0

我正在使用silverlight 5和Stacked100BarSeries进行数据可视化。 我希望每组的计数显示在颜色的前面,就像我在下图中所示。默认情况下,它显示在工具提示中。 我怎么能这样做?

enter image description here

XAML:

 <chartingToolkit:Chart Title="Checkups (100% Stacked Bar)">
        <chartingToolkit:Stacked100BarSeries>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ1}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q1"/>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ2}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q2"/>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ3}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q3"/>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ4}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q4"/>
        </chartingToolkit:Stacked100BarSeries>
        <chartingToolkit:Chart.Axes>
            <chartingToolkit:CategoryAxis Orientation="Y" Title="Species"/>
            <chartingToolkit:LinearAxis Orientation="X" Title="Percent" ShowGridLines="True"/>
        </chartingToolkit:Chart.Axes>
    </chartingToolkit:Chart>

代码背后:

 public partial class Page1 : Page
{
    public IEnumerable<Pet> CheckupsQ1 { get; private set; }
    public IEnumerable<Pet> CheckupsQ2 { get; private set; }
    public IEnumerable<Pet> CheckupsQ3 { get; private set; }
    public IEnumerable<Pet> CheckupsQ4 { get; private set; }

    public Page1()
    {
        CheckupsQ1 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };
        CheckupsQ2 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };
        CheckupsQ3 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };
        CheckupsQ4 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };

        InitializeComponent();

        DataContext = this;

    }
}

1 个答案:

答案 0 :(得分:1)

好的,我解决了。

使用Expression混合我编辑了图表模板,这是执行魔术的xaml

(特别注意FormattedDependentValue的行):

  <Style x:Key="@DataPointStyle" TargetType="toolkit:BarDataPoint">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:BarDataPoint">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                x:Name="Root" Margin="0,5,0,5">
                        <Border.Effect>
                            <DropShadowEffect Opacity="0.25" ShadowDepth="1.5" Direction="300"/>
                        </Border.Effect>
                        <Grid Background="{TemplateBinding Background}">
                            <TextBlock Text="{TemplateBinding FormattedDependentValue}" 
                                       FontSize="13"  VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>