軸間隔の構成 (igDataChart)

トピックの概要

目的

このトピックでは、igDataChart™ コントロールで主軸および副軸の間隔を構成する方法を説明します。

前提条件

このトピックを理解するためには、以下のトピックを理解しておく必要があります:

igDataChart の追加

このトピックでは、igDataChart™ コントロールをページに追加し、データにバインドする方法を紹介します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

軸間隔

概要

igDataChart コントロールの主軸および副軸の間隔機能を使用すると、指定された色および太さの間隔を igDataChart コントロールの x および y 軸に適用することができます。

プレビュー

以下の実例は NumericX および NumericY 軸を使用する構成可能な igDataChart コントロールを紹介します。Interval、MinorInterval、MajorStroke、および MinorStroke オプションを設定できます。

NumericXAxis の間隔

軸の主間隔および副間隔は、軸の Interval プロパティおよび MinorInterval プロパティに、0 より大きい値を設定することで実装されます。副間隔に対応する副グリッド線を表示するには、軸の MinorStroke および MinorStrokeThickness プロパティを設定する必要があります (副グリッド線は色または太さがデフォルトで設定されていません。副グリッド線を表示するには、最初にこれらの値を設定します)。

プロパティ

以下の表に、主軸および副軸の間隔の構成で使用できるプロパティを示します。

プロパティ名	プロパティタイプ	説明
Interval	double	この値は、軸ラベルおよび主グリッド線 (使用する場合) に必要なスペースを提供します。軸ラベルの間隔も、この値によって設定され、間隔に関連付けられた軸のポイントにラベルが 1 つ表示されることに注意してください。カテゴリ軸では、この値は、最初の項目から最後のカテゴリ項目の範囲のインデックスとして表されます。通常、この値は、カテゴリ項目の合計数の 10～20% に相当します。その結果、すべての軸ラベルは軸にフィットし、他の軸ラベルによって切り取られることはありません。数値軸では、この値は軸の最小値から最大値の範囲の double 値として表されます。数値軸はデフォルトで、軸の最小値および最大値から四捨五入されたバランスの良い数値に、自動的に計算されます。日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。
MajorStroke	brush	軸の主グリッド線の色。
MajorStrokeThickness	double	double 値として設定された軸の主グリッド線の太さ (ピクセル)
MinorInterval	double	この値は、主グリッド線と主グリッド線の間に描画される副グリッド線に必要なスペースを提供します。そのために、MinorInterval プロパティの値は、常に MajorInterval プロパティの値より小さい値 (通常、2 分の 1 から 5 分の 1) であることが必要です。カテゴリ軸では、この値が MajorInterval プロパティの小数として表されます。通常、この値は 0.25 から 0.5 の範囲です。数値軸では、この値は軸の最小値から最大値の範囲の double 値として表されます。数値軸はデフォルトで、軸の最小値および最高値から副間隔を自動的に計算しません。日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。
MinorStroke	brush	軸の副グリッド線の色。
MinorStrokeThickness	double	double 値として設定された軸の副グリッド線の太さ(ピクセル)。

NumericXExample

この表の下に示すスクリーンショットは、以下の設定の結果 (LineSeries を使用)、軸の主間隔と副間隔プロパティを NumericXAxis に設定した igDataChart コントロールの外観がどのようになるかを示します。

プロパティ	値
MinorInterval	2
MinorStroke	“Red”
MinorStrokeThickness	1
Interval	10
MajorStroke	“Green”
MajorStrokeThickness	2

以下のコードはこの例を実装します。

JavaScript の場合:

$("#container").igDataChart({
    …
    axes: [{
                    name: "xAxis",
                    type: "numericX",
                    title: "Year",
                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 2,
                    interval: 10,
                    majorStrokeThickness: 2,

                }, …

NumericYExample

この表の下に示すスクリーンショットは、以下の設定の結果 (LineSeries を使用)、軸の主間隔と副間隔のプロパティを NumericYAxis に設定した igDataChart コントロールの外観がどのようになるかを示します。

プロパティ	値
MinorInterval	5000
MinorStroke	“Red”
MinorStrokeThickness	1
Interval	10000
MajorStroke	“Green”
MajorStrokeThickness	2

以下のコードはこの例を実装します。

JavaScript の場合:

$("#container").igDataChart({
    …
    axes: [{
            name: "yAxis",
                    type: "numericY",
                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 5000,
                    interval: 10000,
                    }, …

CategoryXExample

このサンプルは、軸の主間隔と副間隔のプロパティを CategoryXAxis に設定して、以下の設定の結果 (MinorInterval、MinorStroke、MinorStrokeThickness、Interval、MajorStroke、および MajorStrokeThickness) として表示した igDataChart コントロールを紹介します。

CategoryXAxis の間隔

Ignite UI | ヘルプトピック

軸間隔の構成 (igDataChart)

トピックの概要

目的