Angular 軸グリッド線

すべての Ignite UI for Angular チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。

軸の主グリッド線は、軸ラベルの位置から水平 (Y 軸) または垂直 (X 軸) に伸びる長い線であり、チャートのプロット領域を介して描画されます。軸の副グリッド線は、軸の主グリッド線の間に描画される線です。

軸目盛りは、Angular チャートのすべての主線の位置で各ラベルのすべての水平軸および垂直軸に沿って表示されます。

Angular 軸グリッド線の例

この例は、指定した間隔で主グリッド線と副グリッド線を表示するために軸グリッド線を構成する方法を示しています。

Angular 軸グリッド線のプロパティ

軸間隔プロパティを設定すると、主グリッド線と軸ラベルが軸に描画される頻度を指定します。同様に、軸副間隔のプロパティは副グリッド線が軸に描画される頻度を指定します。

副間隔に対応する副グリッド線を表示するには、軸に XAxisMinorStroke と XAxisMinorStrokeThickness プロパティを設定する必要があります。これは、副グリッド線にはデフォルトの色または太さがなく、最初に割り当てるまで表示されないためです。

以下のプロパティを設定して、Angular チャートでのグリッド線の表示をカスタマイズできます。

上記のテーブルの主間隔と副間隔については、軸ラベルの主間隔も、この値によって設定され、間隔に関連付けられた軸のポイントにラベルが 1 つ表示されることに注意してください。副間隔グリッド線は常に主グリッド線の間に描画されるため、副間隔プロパティは常に主間隔プロパティの値よりもはるかに小さい値 (通常は 2〜5 倍小さい値) に設定する必要があります。

カテゴリ軸では、間隔は、最初の項目から最後のカテゴリ項目の範囲のインデックスとして表されます。通常、この値は、主間隔のカテゴリ項目の合計数の 10～20% に相当します。その結果、すべての軸ラベルは軸にフィットし、他の軸ラベルによって切り取られることはありません。副間隔の場合、主間隔プロパティの一部として表されます。通常、この値の範囲は 0.25～0.5 です。

数値軸では、間隔値は軸の最小値と最大値の間の double 値として表されます。数値軸はデフォルトで、軸の最小値および最大値から四捨五入されたバランスの良い数値に、自動的に計算されます。

日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。

以下の例は、上記のプロパティを設定してグリッド線をカスタマイズする方法を示しています。

DataChart の軸には、それぞれ MajorStrokeDashArray プロパティと MinorStrokeDashArray プロパティを利用して、主グリッド線と副グリッド線にダッシュ配列を配置する機能もあります。対応する軸の StrokeDashArray プロパティを設定することで、実際の軸線も破線にすることができます。これらのプロパティは、対応するグリッド線のダッシュの長さを記述する数値の配列を受け取ります。

次の例は、上記のダッシュ配列プロパティが設定された DataChart を示しています。

Angular 軸目盛りの例

軸の目盛りは、XAxisTickLength と YAxisTickLength プロパティを 0 より大きい値に設定することで有効になります。これらのプロパティは、目盛りを形成する線セグメントの長さを指定します。

目盛りは常に軸線から伸び、ラベルの方向を指します。ラベルは、重ならないように目盛りの長さの値でオフセットされます。たとえば、YAxisTickLength プロパティが 5 に設定されている場合、軸ラベルはその量だけ左にシフトされます。

以下の例は、上記のプロパティを設定して目盛りをカスタマイズする方法を示します。

Angular 軸目盛りのプロパティ

以下のプロパティを設定して、Angular チャートで軸の目盛りの表示方法をカスタマイズできます。

その他のリソース

関連するチャート機能の詳細については、以下のトピックを参照してください。

• 軸レイアウト
• 軸オプション

API リファレンス

以下は、上記のセクションで説明されている API メンバーのリストです。