Xuni 製品ヘルプ
凡例

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

BorderColorBorderWidthBackgroundColor、および 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");

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">

マークアップを追加して、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>
ここにサンプルコードを入力します。プレビューに切り替えるか、ヘルプシステムをビルドすると、自動的に色が設定されます。

 

 


Copyright © GrapeCity inc. All rights reserved.