[]
軸は、ラベル、線、目盛りマーク、タイトルなどのいくつかの要素で構成されます。FlexChartでは、X軸とY軸の両方に、これらの要素をカスタマイズするためのプロパティがいくつか用意されています。
チャートの軸には、主に次の2つの目的があります。
scaling:軸は、チャートに表示される値の範囲を設定します。デフォルトでは、この範囲はチャートによって自動的に計算されます。軸が表示されていない場合でも、この範囲は使用されます。
context:軸は、表示されている値の識別に役立つ目盛りマークとラベルを表示します(例:「この棒はどの国の値を表しているか」)。
デフォルトでは、FlexChartは、X軸およびY軸の主グリッド線を水平線で示します。これにより、チャートが明確で読みやすくなります。FlexChartに連結すると、X軸とY軸が自動的に生成されます。
コードではaxisXプロパティとaxisYプロパティから軸にアクセスできます。基本的な軸のタスクを次に示します。
以下は、軸タイトルを設定する例です。
import * as chart from '@mescius/wijmo.chart';
var myChart = new chart.FlexChart('#myChart');
myChart.axisX.title = 'X軸のタイトル';
myChart.axisY.title = 'Y軸のタイトル';
FlexChartを連結すると、データセットに対して最適な軸の範囲が自動的に計算されます。minおよびmaxプロパティを設定して、明示的に軸の範囲を制御します。
myChart.axisY.min = 150000;
myChart.axisY.max = 160000;
デフォルトでは、X軸は左から右に増加し、Y軸は下から上に増加します。reversedプロパティを設定して、それぞれの軸の方向を反転できます。
myChart.axisY.reversed = true;
デフォルトでは、X軸はプロット領域の下に置かれ、Y軸はプロット領域の左に置かれます。positionプロパティを設定して、それぞれの軸をプロット領域の反対側に配置できます。
myChart.axisX.position = 'Top';
myChart.axisY.position = 'Right';
さらに、originプロパティを設定して、軸どうしがどこで交差するかを設定します。デフォルトでは、軸はそれぞれの最小値の位置で交差します。これは、それらが負の値でも同じです。originプロパティを使用すると、軸が値0の位置で交差するようにして、4象限のチャートを作成できます。
myChart.axisX.origin = 0;
myChart.axisY.origin = 0;
originを設定した場合は、positionプロパティを使用して、軸線のどちら側に目盛りとラベルを表示するかを決定できます。
positionプロパティを「None」に設定すると、軸を完全に削除できます。結果は、データインク比が高い最もクリーンなチャートになります。
myChart.axisX.position = 'None';
myChart.axisY.position = 'None';
位置を「None」にすると、グリッド線も非表示になります。グリッド線を表示したまま、軸線、タイトル、ラベルのみを非表示にするには、axisLine、labels、titleプロパティを個別に設定します。
例:
// X軸線、ラベル、タイトルを非表示にします
myChart.axisX.axisLine = false;
myChart.axisX.labels = false;
myChart.axisX.title = '';