ナレッジベース

Xuni

円形チャートを表示した場合に、各要素である扇型のスライスにその対象となるスライスの値を
データラベルとして表示できます。

データラベルを設定するテンプレートに表示領域を作成して設定することで、各スライスが持つデータを表示できます。
FlexPieに表示するデータは、PieDataPointクラスのオブジェクトに格納されているのでそのプロパティを利用して取得可能です。

取得できるデータは以下の通りです。

Name：凡例に表示される名前

Percentage：対象スライスの値を表すパーセンテージ

PointIndex：データポイントのポイントインデックス

Value：対象スライスの値

DataObject：接続しているデータオブジェクト

下図は、取得できる各データを表示した例です。



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

<xuni:FlexPie x:Name="chart"
                Binding="Value"
                BindingName="Name"
                ItemsSource="{Binding Data}">
    <xuni:FlexPie.DataLabel>
        <xuni:PieDataLabel Position="Outside" >
            <xuni:PieDataLabel.ContentTemplate>
            <DataTemplate>
                <Frame BackgroundColor="#E0FFFFFF" Padding="2" HasShadow="true">
                    <StackLayout Orientation="Vertical" >

                    <Label Text="{Binding Name}" 
                        FontSize="11" TextColor="#60242c" HorizontalTextAlignment="Center" />
                    <Label Text="{Binding PointIndex, StringFormat='Index= {0:0}'}" 
                        FontSize="10" TextColor="#60242c" HorizontalTextAlignment="Center" />
                    <Label Text="{Binding Percentage, StringFormat='{0:P1}'}" 
                        FontSize="10" TextColor="#60242c" HorizontalTextAlignment="Center" />
                    <Label Text="{Binding Value, StringFormat='{0:#,0}トン'}" 
                        FontSize="10" TextColor="#60242c" HorizontalTextAlignment="Center" />
                                                        
                    </StackLayout>
                </Frame>
            </DataTemplate>
            </xuni:PieDataLabel.ContentTemplate>
        </xuni:PieDataLabel>
    </xuni:FlexPie.DataLabel>

</xuni:FlexPie>

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

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