1

従属値を円グラフ自体に表示したいと思います（凡例領域ではありません）。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>
4

1 に答える 1

9

チャートに関連するリソースのコレクションへのリンクがあることを思い出しました。

そのページには、円グラフにラベルを追加するのに役立つリンクがあります: LabeledPieChart

このソリューションでは、ツールキット クラスから派生したクラスを使用しますChart。また、新しいクラスを作成しなくても同様の動作を作成できると述べましたが、既存のコントロールを使用するよりも簡単だとは思いません。

とにかく、依存値を表示するパイ シリーズのカスタム スタイルを投稿できます。Left必要なのは、スライスのパス ジオメトリを 、または のTopプロパティ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}" ...

また、チャートはオレンジ色の単色チャートとして表示されます。

気に入らない場合は、チャートのプロパティを変更する方法を示したリンクを次に示します。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 ...

于 2011-04-23T21:07:47.083 に答える