軸は、ラベル、線、目盛りマーク、タイトルなどのいくつかの要素で構成されます。FlexChart では、X 軸と Y 軸の両方に、これらの要素をカスタマイズするためのプロパティがいくつか用意されています。主要なプロパティを次に示します。

• format：軸ラベルに使用される書式文字列を選択できます。
• labelFont：ラベルのフォントサイズと属性を選択できます。
• labelTextColor - ラベルの色を選択できます。
• lineColor：軸の色を選択できます。
• lineWidth：軸の太さを設定できます。
• majorTickColor - 大目盛りマークの色を選択できます。
• majorTickWidth - 大目盛りマークの太さを選択できます。
• majorUnit：軸のラベル単位を設定できます。
• origin - 原点を設定できます。
• title - 軸にタイトルを追加できます。
• titleTextColor：軸タイトルの色を選択できます。

詳細については、.Net で使用できる「標準の書式文字列」を参照してください。

デフォルトでは、Y 軸の軸線と X 軸のグリッド線は無効です。軸線とグリッド線を有効にするには、axisLineVisible と majorGridVisible プロパティを true に設定します。

次の図は、カスタマイズされた軸を持つ FlexChart を示しています。

次のコード例は、軸をカスタマイズする方法を示します。この例では、「外観のカスタマイズ」セクションで作成したサンプルを使用します。

サンプルコード

chart.axisY.labelsVisible = true
chart.axisY.majorGridVisible = true
chart.axisY.lineWidth = 2
chart.axisY.lineColor = UIColor.blueColor()
chart.axisY.title = "売上と経費(ミリオン)"
chart.axisY.majorTickWidth = 0
chart.axisY.majorGridColor = UIColor.blueColor()
chart.axisY.majorUnit = 2000
chart.axisY.labelTextColor = UIColor.redColor()
chart.axisY.format = "D"
        
chart.axisX.labelsVisible = true
chart.axisX.majorGridVisible = true
chart.axisX.lineColor = UIColor.blueColor()
chart.axisX.title = "月"
chart.axisX.majorGridColor = UIColor.blueColor()
chart.axisX.labelTextColor = UIColor.redColor()

chart.axisY.labelsVisible = true;
chart.axisY.majorGridVisible = true;
chart.axisY.lineWidth = 2;
chart.axisY.lineColor = [UIColor blueColor];
chart.axisY.title = @"売上と経費(ミリオン)";
chart.axisY.majorTickWidth = 0;
chart.axisY.majorGridColor = [UIColor blueColor ];
chart.axisY.majorUnit = 2000;
chart.axisY.labelTextColor = [UIColor redColor];
chart.axisY.format = @"D";
    
chart.axisX.labelsVisible = true;
chart.axisX.majorGridVisible = true;
chart.axisX.lineColor = [UIColor blueColor];
chart.axisX.title = @"月";
chart.axisX.majorGridColor = [UIColor blueColor ];
chart.axisX.labelTextColor = [UIColor redColor ];

chart.AxisY.AxisLineVisible = true;
chart.AxisY.MajorGridVisible = true;
chart.AxisY.LineWidth = 3;
chart.AxisY.LineColor = UIColor.Blue;
chart.AxisY.Title = "売上と経費(ミリオン)";
chart.AxisY.MajorTickWidth = 0;
chart.AxisY.MajorGridColor = UIColor.Blue;
chart.AxisY.MajorUnit = 2000;
chart.AxisY.LabelTextColor = UIColor.Red;
chart.AxisY.Format = "D";

chart.AxisX.AxisLineVisible = true;
chart.AxisX.MajorGridVisible = true;
chart.AxisX.Title = "月";
chart.AxisX.LineColor = UIColor.Blue;
chart.AxisX.MajorGridColor = UIColor.Blue;
chart.AxisX.MajorTickColor = UIColor.Blue;
chart.AxisX.LabelTextColor = UIColor.Red;

軸の原点のカスタマイズ

FlexChart の軸の原点をカスタマイズして、4 象限のすべてにデータポイントをプロットできます。axisX.origin および axisY.origin プロパティを使用して、両方の軸の原点を特定のポイントに設定します。これは、チャートに正の値も負の値もプロットするトレンド分析のシナリオで役立ちます。軸の原点がゼロに設定されている場合、負の値は水平線より下にプロットされ、正の値はその上にプロットされます。これにより、チャートでデータ分析する際に視認性が向上します。

次の図は、FlexChart の X 軸の原点が 1000 に設定されている FlexChart です。

サンプルコード

次のコード例は、X 軸の原点をカスタマイズする方法を示します。この例では、「外観のカスタマイズ」セクションで作成したサンプルを使用します。同様に、Y 軸にも値を設定して、第 1 および第 4 象限に値を表示できます。

//X軸のオリジンを設定します
chart.axisX.origin = 10000

/X軸のオリジンを設定します
chart.axisX.origin = 10000;

//X軸のオリジンを設定します
chart.AxisX.Origin = 10000;

Copyright © GrapeCity inc. All rights reserved.