FlexChart では、getLabelLoading メソッドを使用することで、軸ラベルの書式を標準の書式文字列よりも高度にカスタマイズできます。この機能を使用すれば、モバイル画面の限られたスペースを有効に利用してデータをより明確に表示できます。また、エンドユーザーがデータの意味をはっきりと理解できるように、カスタマイズした注釈を軸に表示することもできます。
Y 軸をカスタマイズして数字を短縮形で表示
また、長いテキストの代わりに画像などのカスタム要素を軸に表示したり、長い数値表現をカスタム書式によって短縮表記にする（たとえば、1,000 を K で表すなど）ことも可能です。これにより、6 桁以上の数値をモバイル画面に簡単にプロットできます。
次の図は、Y 軸のラベルを短縮表記にして桁数の多い数字を明確に示す例を示します。
軸ラベルの書式をカスタマイズするには、以下のコードを追加します。この例では、「クイックスタート」のセクションで作成したサンプルを使用しています。
| Java |
コードのコピー
|
|---|---|
// 軸ラベルの書式を設定します。 mChart.getAxisY().getLabelLoading().addHandler(new IEventHandler() { @Override public void call(Object arg0, Object arg1) { LabelLoadingEventArgs args = (LabelLoadingEventArgs) arg1; args.renderEngine.setFill(Color.argb(255, 0, (int) args.value % 255, 0)); args.renderEngine.drawString(args.value / 1000 + "K", (int) args.region.left, (int) args.region.top + args.region.height() / 2); } }, this); |
|
| C# |
コードのコピー
|
|---|---|
// Y 軸ハンドラを設定します。 mChart.AxisY.LabelLoading.AddHandler(new MyHandlerY(), mChart); // ハンドラで軸の書式を設定します。 public class MyHandlerY : Java.Lang.Object, IEventHandler { public void Call(Java.Lang.Object p0, Java.Lang.Object p1) { LabelLoadingEventArgs myArgs = (LabelLoadingEventArgs)p1; if (myArgs.Value > 5000) { myArgs.RenderEngine.SetTextSize(30); myArgs.RenderEngine.SetTypeface(Android.Graphics.Typeface.DefaultBold); myArgs.RenderEngine.DrawString((myArgs.Value / 1000).ToString() + "K", myArgs.Region.Left, myArgs.Region.Top); } else { myArgs.RenderEngine.DrawString((myArgs.Value / 1000).ToString(), myArgs.Region.Left, myArgs.Region.Top); } } } |
|
X 軸をカスタマイズして画像を表示
別の例として、米国、日本、英国、ドイツ、イタリア、ギリシャの 6 か国の売上と経費のデータをグラフ化する場合を取り上げます。ここでは、X 軸のラベルに国の名前ではなく国旗を表示します。
このケースでは、プロジェクトに画像を追加し、コードビハインドで以下のような変更を行うことで、軸をカスタマイズできます。この例のデータソースを以下のコードに示します。
| Java |
コードのコピー
|
|---|---|
// 国別の売上および経費のデータソース import java.util.Random; import com.grapecity.xuni.core.ObservableList; public class ChartPoint { protected String name; protected String country; protected int sales; protected int expenses; protected int downloads; public ChartPoint(String name, int sales, int expenses, int downloads) { super(); this.name = name; this.sales = sales; this.expenses = expenses; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getSales() { return sales; } public void setSales(int sales) { this.sales = sales; } public int getExpenses() { return expenses; } public void setExpenses(int expenses) { this.expenses = expenses; } // ChartPoint 型のランダムオブジェクトのリストを作成するメソッド public static ObservableList<ChartPoint> getList() { ObservableList<ChartPoint> list = new ObservableList<ChartPoint>(); int n = 6; // 系列要素の数 String[] country = { "US", "Japan", "UK", "Germany", "Italy", "Greece"}; Random random = new Random(); for (int i = 0; i < n; i++) { list.add(new ChartPoint(country[i], random.nextInt(20000), random.nextInt(20000), random.nextInt(20000))); } return list; } } |
|
以下のコードを MainActivity に追加して、画像リソースを初期化します。
| Java |
コードのコピー
|
|---|---|
// 画像リソースを初期化します。 int[] imageResources = { R.drawable.us, R.drawable.germany, R.drawable.uk, R.drawable.japan, R.drawable.italy, R.drawable.greece }; |
|
次に、以下のコードを追加して X 軸のラベルを書式設定し、テキスト形式の国名の代わりに画像を適用します。
| Java |
コードのコピー
|
|---|---|
// X 軸ラベルの書式を設定します。 mChart.getAxisX().getLabelLoading().addHandler(new IEventHandler() { @Override public void call(Object arg0, Object arg1) { LabelLoadingEventArgs args = (LabelLoadingEventArgs) arg1; int imgId = imageResources[(int) args.value]; Bitmap bmp = BitmapFactory.decodeResource(getApplicationContext().getResources(), imgId); Rect region = args.region; int cx = region.left + region.width() / 2; int cy = region.top + region.height() / 2; Rect rect = new Rect(cx - 16, cy - 11, cx + 16, cy + 11); args.renderEngine.canvas.drawBitmap(bmp, null, rect, null); } }, this); |
|
アプリケーションを実行すると、次の図に示すように、X 軸に国名ではなく画像アイコンが表示されます。