ナレッジベース

Xuni

円形チャートを表示した場合に、各要素である扇型のスライスにその対象となるスライスの値を表示できます。
表示方法は、FlexPieのDataLabelオブジェクトを作成し、その中にDataTemplateで表示する内容を定義します。　

以下の例では、Frameクラスを利用して枠を作り、その内部にStackLayoutでLabelを2段表示しました。　
上段がそのデータの名称（凡例名）で、下段がデータの値です。



上記のXAML記述は以下になります。

サンプルコード
XAML（Xamarin.Forms）

<xuni:FlexPie x:Name="chart"
                Binding="Value"
                BindingName="Name"
                ItemsSource="{Binding Data}">

    <xuni:FlexPie.DataLabel>
        <xuni:PieDataLabel Position="Center" >
            <xuni:PieDataLabel.ContentTemplate>

                <DataTemplate>
                    <Frame BackgroundColor="#E0FFFFFF" 
                         Padding="2" HasShadow="true">

                        <StackLayout Orientation="Vertical" >
                        <Label FontSize="15"
                            Text="{Binding Name}"
                            TextColor="#60242c" 
                            HorizontalTextAlignment="Center" />
                        <Label FontSize="12"
                            Text="{Binding Value,
                            StringFormat='{0:#,0}トン'}"
                            TextColor="#60242c" 
                            HorizontalTextAlignment="Center" />

                        </StackLayout>
                    </Frame>
                </DataTemplate>

            </xuni:PieDataLabel.ContentTemplate>
        </xuni:PieDataLabel>
    </xuni:FlexPie.DataLabel>

</xuni:FlexPie>

Xuni　＞ 技術情報　＞ ドキュメント ＞ FlexPie－機能－データラベル


参考情報
Frameクラスを利用した場合、前述の図のようにiOSの場合は規定で影（Shadow）が表示されます。
Xamarin　＞ Frame Class（英語）

チャート用データの出典：ICA/CAOBISCO、日本チョコレート・ココア協会