[Xuni:FlexChart] 複数の軸を設定する方法
対象製品
Xuni
詳細
チャートに複数の系列を表示した場合、各系列で異なる軸に表現したい場合があります。
例えば、通常左側に表示されてる既定のY軸がひとつの系列用で、チャート領域の右側に別系列用の軸を表示するようなケースです。折れ線グラフと棒グラフの複合チャートなどでも必要になります。
複数の軸を表示するには、新規にChartAxisオブジェクトを作成して系列を設定し、Axesオブジェクトに追加することで実現します。
ことのき軸の表示位置を指定できるので、既定のY軸の反対側(Right)に指定することも、後ろ側(Left)に指定することも可能です。さらに軸を追加する場合も、同じ手順で実行できます。
以下は、Xamarin.Formsを利用した場合のサンプルです。
サンプルコード
C#
各プラットフォームごとの軸の追加方法は、製品ヘルプの「複数のY軸」で解説しています。
Xuni > 技術情報 > ドキュメント > 複数のY軸:Android/iOS/Xamarin
例えば、通常左側に表示されてる既定のY軸がひとつの系列用で、チャート領域の右側に別系列用の軸を表示するようなケースです。折れ線グラフと棒グラフの複合チャートなどでも必要になります。
複数の軸を表示するには、新規にChartAxisオブジェクトを作成して系列を設定し、Axesオブジェクトに追加することで実現します。
ことのき軸の表示位置を指定できるので、既定のY軸の反対側(Right)に指定することも、後ろ側(Left)に指定することも可能です。さらに軸を追加する場合も、同じ手順で実行できます。
以下は、Xamarin.Formsを利用した場合のサンプルです。
サンプルコード
C#
// 1つ目の追加ChartAxisオブジェクトを新規作成 ChartAxis ax1 = new ChartAxis(); ax1.Name = "ChartAxis1"; // 名前を設定 ax1.Position = Xuni.Forms.ChartCore.ChartPositionType.Right; //右に表示 ax1.MajorGridVisible = false; //グリッド線を非表示 ax1.MajorUnit = 10; // 目盛りの表示間隔を10に設定 cs1.AxisY = ax1.Name; // 系列に作成した軸を関連付ける chart.Axes.Add(ax1); // 軸の追加 // 2つ目の追加ChartAxisオブジェクトを新規作成 // インスタンス作成時に表示位置も左に指定 ChartAxis ax2 = new ChartAxis(chart,Xuni.Forms.ChartCore.ChartPositionType.Left); ax2.Name = "ChartAxis2"; // 名前を設定 ax2.MajorGridColor=Color.Blue; //グリッド線をBlueに設定 ax2.MajorGridDashes = new double[] { 15,10 }; //グリッド線を点線に設定 ax2.MajorUnit = 5; // 目盛りの表示間隔を5に設定 cs2.AxisY = ax2.Name; // 系列に作成した軸を関連付ける chart.Axes.Add(ax2); // 軸の追加
各プラットフォームごとの軸の追加方法は、製品ヘルプの「複数のY軸」で解説しています。
Xuni > 技術情報 > ドキュメント > 複数のY軸:Android/iOS/Xamarin