Angular 軸レイアウト
すべての Ignite UI for Angular チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。これらの機能は、以下の例で示されています。
[!Note] 次の例は、
IgxCategoryChartComponentおよびIgxFinancialChartComponentコントロールに適用されます。
軸位置の例
すべての軸に対して、チャートのプロット領域に関連して軸の位置を指定できます。Angular チャートの xAxisLabelLocation プロパティを使用すると、x 軸の線とそのラベルをプロット領域の上または下に配置できます。同様に、yAxisLabelLocation プロパティを使用して、プロット領域の左側または右側に y 軸を配置できます。
以下の例は、2009 年以降に生成された再生可能電力量を折れ線チャートで示しています。チャートのプロット領域の内側または外側の左側または右側にラベルを配置したときに軸がどのように見えるかを視覚化できるように、yAxisLabelLocation を構成できるドロップダウンがあります。
軸の高度なシナリオ
より高度な軸レイアウト シナリオでは、Angular データ チャートを使用して軸を共有したり、同じプロット領域に複数の y 軸や x 軸を追加したり、特定の値で軸を交差させたりすることができます。次の例は、IgxDataChartComponent のこれらの機能の使用方法を示しています。
軸共有の例
Angular IgxDataChartComponent の同じプロット領域に複数の軸を共有して追加できます。IgxTimeXAxisComponent を共有し、複数の IgxNumericYAxisComponent を追加して、さまざまな値 (株価や株取引量など) を持つ多くのデータ ソースをプロットするのが一般的なシナリオです。
以下の例は、株価チャートと縦棒チャートをプロットした株価および株取引量チャートを示しています。この場合、左側の Y 軸は縦棒チャートで使用され、右側の Y 軸は株価チャート、X 軸は 2 つの間で共有されます。
軸交差の例
軸をプロット領域の外側に配置することに加えて、Angular IgxDataChartComponent は、軸をプロット領域の内側に配置し、特定の値で交差させるオプションも提供します。たとえば、x 軸と y 軸の両方で crossingAxis プロパティと crossingValue プロパティを設定して、原点が (0、0) で 交差するように軸線と軸ラベルを描画することにより、三角関数チャートを作成できます。
以下の例は、散布スプライン チャートで表される Sin と Cos 波を示します。X 軸と Y 軸は (0、0) 原点で交差します。
その他のリソース
関連するチャート機能の詳細については、以下のトピックを参照してください。
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです。
IgxDataChartComponent |
IgxCategoryChartComponent |
|---|---|
Axes ➔ IgxNumericYAxisComponent ➔ crossingAxis |
なし |
Axes ➔ IgxNumericYAxisComponent ➔ crossingValue |
なし |
Axes ➔ IgxNumericXAxisComponent ➔ isInverted |
xAxisInverted |
Axes ➔ IgxNumericYAxisComponent ➔ isInverted |
yAxisInverted |
Axes ➔ IgxNumericYAxisComponent ➔ LabelLocation |
yAxisLabelLocation |
Axes ➔ IgxNumericXAxisComponent ➔ LabelLocation |
xAxisLabelLocation |
Axes ➔ IgxNumericYAxisComponent ➔ LabelHorizontalAlignment |
yAxisLabelHorizontalAlignment |
Axes ➔ IgxNumericXAxisComponent ➔ LabelVerticalAlignment |
xAxisLabelVerticalAlignment |
Axes ➔ IgxNumericYAxisComponent ➔ LabelVisibility |
yAxisLabelVisibility |
Axes ➔ IgxNumericXAxisComponent ➔ LabelVisibility |
xAxisLabelVisibility |
GitHub