凡例

Xuni FlexPie には凡例を表示するオプションがあります。凡例には、円グラフのセグメントに提示されるデータのタイプを表示できます。凡例の位置は、デフォルトでは「Auto」に設定されます。これは、凡例の位置がデバイスの画面領域に依存することを意味します。この場合、円グラフは、デバイス上の利用可能な領域を効率よく占有できます。

BorderColor、BorderWidth、BackgroundColor、および LabelFont プロパティを設定して凡例をカスタマイズできます。Position プロパティでは、チャートの凡例を表示する場所を選択できます。

プロパティ	説明
Position（位置）	このプロパティには、次の値があります Auto（自動）- デフォルト値です。プロット領域内の使用可能なスペースに合わせた最良の方法で凡例を設定することで、応答型の配置を可能にします。 Bottom（下部） - プロット領域内の円グラフの下部に凡例を配置します。 Left（左側） - プロット領域内の円グラフの左側に凡例を配置します。 Right（右側） - プロット領域内の円グラフの右側に凡例を配置します。 Top（上部） - プロット領域内の円グラフの上部に凡例を配置します。 None（なし） - 凡例を非表示にします。
BorderColor（境界線の色）	凡例の境界線の色を設定します。
BorderWidth（境界線の幅）	凡例の境界線の幅を設定します。
BackgroundColor（背景色）	凡例の背景色を設定します。
LabelTextColor（ラベルテキスト色）	凡例のラベルに表示される文字の色を設定します。

Positionプロパティを’Top', 'Bottom', 'Left' or 'Right'に設定し、Orientationを'Horizontal'に設定すると、画面領域が足りない場合は、凡例は自動的に折り返します。

次の図は、これらのプロパティを設定した後の FlexPie を示しています。

次のコード例は、C# と XAML でこれらのプロパティを設定する方法を示します。この例では、「クイックスタート」セクションで作成したサンプルを使用しています。

`C# のコード`

C#	コードのコピー
//凡例を設定します。 chart.Legend.Position = Xuni.Forms.ChartCore.ChartPositionType.Right; chart.Legend.BackgroundColor = Color.FromHex("#DDF9EC"); chart.Legend.BorderColor = Color.FromHex("#00C7CC"); chart.Legend.BorderWidth = 2; chart.Legend.LabelTextColor = Color.FromHex("#022A31");

コードのコピー

//凡例を設定します。
chart.Legend.Position = Xuni.Forms.ChartCore.ChartPositionType.Right;
chart.Legend.BackgroundColor = Color.FromHex("#DDF9EC");
chart.Legend.BorderColor = Color.FromHex("#00C7CC");
chart.Legend.BorderWidth = 2;
chart.Legend.LabelTextColor = Color.FromHex("#022A31");

`XAML のコード`

XAML	コードのコピー
XAML HTML <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Forms.FlexPie;assembly=Xuni.Forms.FlexPie" xmlns:chartcore="clr-namespace:Xuni.Forms.ChartCore;assembly=Xuni.Forms.ChartCore">

XAML

コードのコピー

XAML HTML <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:Class="Appl.QuickStart"
 xmlns:xuni="clr-namespace:Xuni.Forms.FlexPie;assembly=Xuni.Forms.FlexPie"
 xmlns:chartcore="clr-namespace:Xuni.Forms.ChartCore;assembly=Xuni.Forms.ChartCore">

マークアップを追加して、FlexPie コントロールのマークアップ内でチャート凡例をカスタマイズします。以下に例を示します。

XAML	コードのコピー
<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value" Grid.Row="1" Grid.ColumnSpan="2"> <xuni:FlexPie.Legend > <chartcore:ChartLegend BorderColor="#00C7CC" BorderWidth="2" BackgroundColor="#DDF9EC" LabelTextColor = "#022A31" Position="Bottom"> </chartcore:ChartLegend> </xuni:FlexPie.Legend> </xuni:FlexPie>

XAML

コードのコピー

<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value"
 Grid.Row="1" Grid.ColumnSpan="2">
  <xuni:FlexPie.Legend >
    <chartcore:ChartLegend BorderColor="#00C7CC" BorderWidth="2" BackgroundColor="#DDF9EC"
     LabelTextColor = "#022A31" Position="Bottom">
    </chartcore:ChartLegend>
  </xuni:FlexPie.Legend>
</xuni:FlexPie>

ここにサンプルコードを入力します。プレビューに切り替えるか、ヘルプシステムをビルドすると、自動的に色が設定されます。