FlexChart の軸ラベルの書式設定機能を使用すると、軸ラベルの書式を標準の書式文字列よりも高度にカスタマイズできます。LabelLoading イベントによって、画像、アイコン、テキスト、記号などのカスタマイズした注釈を軸に表示できます。これにより、画面スペースの使用を最適化し、チャートデータを明確に可視化できます。
以下のセクションで、軸ラベルの書式設定を使用して FlexChart の X 軸と Y 軸をカスタマイズする方法を説明します。
Y 軸をカスタマイズしてラベルの数字を短縮形で表示
軸ラベルに桁数の多い数字を使用する場合、軸ラベルの書式設定を使用して長い数値表現を短縮表記できます。たとえば、以下の例では、1,000 を示す '000' を K で表しています。これにより、6 桁以上の数値ラベルを、占有する画面スペースを抑えてモバイル画面に簡単にプロットできます。
Y 軸の軸ラベルの書式をカスタマイズするコードを以下に示します。この例では、「クイックスタート」のセクションで作成したサンプルを使用しています。
XAML のコード
XAML で Y 軸の軸ラベルの書式をカスタマイズするには、以下に示すように、Xuni.Forms.ChartCore アセンブリへの参照を設定します。
| XAML |
コードのコピー
|
|---|---|
<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.FlexChart;assembly=Xuni.Forms.FlexChart" xmlns:chartcore="clr-namespace:Xuni.Forms.ChartCore;assembly=Xuni.Forms.ChartCore"> |
|
asjkh
X 軸をカスタマイズして画像を表示
別の例として、6 か国の売上と経費のデータをグラフ化する場合を取り上げます。ここでは、国の名前の代わりに国旗を表示することで、グラフの視覚的効果を高めるとともに、意味が一目でわかるようにします。FlexChart の軸ラベルの書式設定を使用して、軸をカスタマイズできます。
 |
下図の FlexChart の X 軸に表示されている国のアイコンは、XCode プロジェクトの images.xcassets フォルダーに追加された .png 画像です。これらの国旗の画像は、Xuni の Samples フォルダーにあります。これら以外の画像やアイコンを使用してもかまいません。 |
次の図では、FlexChart コントロールの軸ラベルの書式設定を使用して、X 軸と Y 軸のラベルをカスタマイズしています。
手順 1: FlexChart のデータソースを作成する
- ソリューションエクスプローラーで、プロジェクト名を右クリックします。
- ［追加 | 新しい項目］を選択します。［新しい項目項目の追加］ダイアログが表示されます。
- ダイアログボックスから［クラス］を選択して [FlexChartDataSource] 名前を付けます。
- [追加] ボタンをクリックしてプロジェクトにクラスを追加します。
-
［[FlexChartDataSource]］クラスに次のコードを追加します。このコードで FlexChart に 6 か国の売上と経費のデータが表示されます。
C# コードのコピーpublic class FlexChartDataSource { private List appData; public List Data { get { return appData; } } public FlexChartDataSource() { // appData appData = new List(); var countryName = "US,Japan,UK,Germany,Italy,Greece".Split(','); var salesData = new[] { 5000, 8500, 7000, 6500, 12000, 14800, 18500, 7500, 6500, 13000, 20000, 9000 }; var downloadsData = new[] { 6000, 7500, 12000, 5800, 11000, 7000, 16000, 17500, 19500, 13250, 13800, 19000 }; var expensesData = new[] { 15000, 18000, 15500, 18500, 11000, 16000, 8000, 7500, 6500, 6000, 13500, 5000 }; for (int i = 0; i < 6; i++) { Country tempCountry = new Country(); tempCountry.Name = countryName[i]; tempCountry.Sales = salesData[i]; tempCountry.Downloads = downloadsData[i]; tempCountry.Expenses = expensesData[i]; appData.Add(tempCountry); } } } public class Country { string _name; long _sales, _downloads, _expenses; public string Name { get { return _name; } set { _name = value; } } public long Sales { get { return _sales; } set { _sales = value; } } public long Downloads { get { return _downloads; } set { _downloads = value; } } public long Expenses { get { return _expenses; } set { _expenses = value; } } }
- 上記の手順に従って [FlagConverter] という新しいクラスを作成してプロジェクトに追加します。
-
[FlagConverter] クラスに次のコードを追加します。[FlagConverter] クラスは IValueConverter インタフェースを実装して X 軸に表示されている項目を画像に変換します。
C# コードのコピーpublic class FlagConverter : IValueConverter { private static ImageSource us = ImageSource.FromResource("FlexChartApp.Images.US.png"); private static ImageSource germany = ImageSource.FromResource("FlexChartApp.Images.Germany.png"); private static ImageSource uk = ImageSource.FromResource("FlexChartApp.Images.UK.png"); private static ImageSource japan = ImageSource.FromResource("FlexChartApp.Images.Japan.png"); private static ImageSource italy = ImageSource.FromResource("FlexChartApp.Images.Italy.png"); private static ImageSource greece = ImageSource.FromResource("FlexChartApp.Images.Greece.png"); public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value != null) { String flag = value.ToString().ToUpper(); switch (flag) { case "US": return us; case "UK": return uk; case "GERMANY": return germany; case "JAPAN": return japan; case "ITALY": return italy; case "GREECE": return greece; } } return us; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return us; } }
- 画像/アイコンをデバイスに描画するためプロパティペインから全ての画像ファイルの Build Action プロパティを Embedded Resource に設定します。
手順 2：LabelLoading イベントを使用して軸ラベルをカスタマイズする
- Y 軸にあるラベルをカスタマイズするには、GetChartControl メソッド内 AxisX_LabelLoading と AxisY_LabelLoading ハンドラを追加します。
C# コードのコピー//X 軸と Y 軸に LabelLoading イベントハンドラを追加します chart.AxisX.LabelLoading += AxisX_LabelLoading; chart.AxisY.LabelLoading += AxisY_LabelLoading; - LabelLoading イベントに次のコードを追加します。
C# コードのコピー//X 軸と Y 軸のラベルを設定 static void AxisX_LabelLoading(object sender, LabelLoadingEventArgs e) { FlagConverter flagConverter = new FlagConverter(); Image img = new Image(); ImageSource src = flagConverter.Convert(e.Text, typeof(ImageSource), null, CultureInfo.CurrentUICulture) as ImageSource; img.Source = src; e.Label = img; } static void AxisY_LabelLoading(object sender, LabelLoadingEventArgs e) { Label label = new Label(); label.Text = string.Format("{0}K", e.Value / 1000); Device.OnPlatform(Android: () => label.FontSize = 7); e.Label = label; }
- ［F5］キーを押してプロジェクトを実行します。