このトピックは、コード例を示して、TimeXAxis を igDataChart™ コントロールで使用する方法を説明します。TimeXAxis を使用する利点は、データのズームで動的にラベル書式設定を変更できることです。また、軸ブレークを構成すると、特定の範囲内の日付を除外できます。たとえば、週末を非表示できます。
このトピックは以下のように構成されています。
注: 次のセクションは、デフォルトのラベル (書式設定および間隔) を変更する場合のみ必須です。
図 1: TimeXAxis の実装例
TimeXAxis を以下のシリーズで使用できます。
特定のシリーズで必要となる軸タイプの詳細については、「シリーズ要件」のトピックを参照してください。
注: 軸線にラベル表示するには、すべてのカテゴリ軸にデータ バインディングおよびデータ マッピングが必要です。カテゴリにデータをバインドする方法については、「データ チャートを使用した作業の開始」トピックのコード例を参照してください。
TimeXAxis にブレークを使用してデータの間隔を除外するオプションがあります。その結果として、ラベルは除外された間隔で表示されません。たとえば、稼動日/非稼動日、休日、または週末などです。
複数の軸ブレークを Breaks プロパティを追加し、一意の Start、End、および Interval を使用して構成できます。
| プロパティ名 | プロパティ タイプ | 説明 |
|---|---|---|
Breaks |
array | 軸ラベル間隔のリスト。間隔は表示される軸範囲に基づいて選択されます。 |
Start |
Date | 軸ブレークの開始時刻。 |
End |
Date | 軸ブレークの終了時刻。 |
Interval |
number | Date として設定されるこのブレークを繰り返す間隔。 |
以下のコード スニペットは、igDataChart で TimeXAxis に年範囲のラベルをスキップする方法を紹介します。間隔は不均一に表示されます。この結果は、以下の図 4 に示されます。
JavaScript の場合:
<script type="text/javascript">
$(function () {
$("#chart").igDataChart({
dataSource: data,
axes: [{
type: "time",
name: "xAxis",
dateTimeMemberPath: "Date"
label: "DateString",
breaks: [{
start: new Date("2009-12-26T00:00:00"),
end: new Date("2009-12-27T23:59:59.99"),
interval: 7 * 24 * 60 * 60 * 1000
}],
}, {
type: "numericY",
name: "yAxis",
}],
});
});
</script>
図 2: 2010 年で月曜日～金曜日のデータを表示する TimeXAxis。
TimeXAxis には以下のラベル フォーマット プロパティがあります。
一意の Format および Range を含む TimeAxisLabelFormat のインスタンスが各許可される間隔に関連する LabelFormats プロパティに追加できます。データを年からミリ秒にドリルダウンする際に表示される軸範囲に基づいてラベルが更新されます。
| プロパティ名 | プロパティ タイプ | 説明 |
|---|---|---|
LabelFormats |
array | ラベル書式設定のリスト。選択したラベル書式は、軸の表示範囲より小さい最大範囲を持つ間隔です。 |
Format |
string | 表示される軸範囲に基づいて適用する DateTime 書式設定文字列。 |
Range |
number | ラベル書式設定に適用するミリ秒で表される軸範囲しきい値。 |
軸に追加された各 TimeAxisLabelFormat の Format および Range プロパティを使用して構成をカスタマイズできます。 たとえば、以下はビューで時間の範囲に基づいたラベル書式の一般的な例です。
JavaScript の場合:
<script type="text/javascript">
$(function () {
$("#chart").igDataChart({
dataSource: data,
axes: [{
type: "time",
name: "xAxis",
dateTimeMemberPath: "Date",
labelFormats: [
{
format: "hh:mm:ss",
range: 1000
},
{
format: "hh:mm",
range: 60 * 1000
},
{
format: "MMM dd",
range: 24 * 60 * 60 * 1000
},
{
format: "MMM yy",
range: 365.24 * 24 * 60 * 60 * 1000
},
{
format: "yyyy",
range: 5 * 365 * 24 * 60 * 60 * 1000
}],
},
});
});
</script>
図 3: "hh:mm:ss" のカスタム TimeAxisLabelFormat を持つ igDataChart コントロール
TimeXAxis は TimeAxisInterval 型の Intervals コレクションを提供します。コレクションに追加された各 TimeAxisInterval は一意の Interval、Range、および IntervalType を割り当てます。
一意の Interval および Range を含む TimeAxisInterval のインスタンスが各 IntervalType に関連する Intervals プロパティに追加できます。データを年からミリ秒にドリルダウンする際にチャートで表示される時間範囲に基づいてラベル間のスペースが更新されます。
| プロパティ名 | プロパティ タイプ | 説明 |
|---|---|---|
Intervals |
array | 軸ラベル間隔のリスト。間隔は表示される軸範囲に基づいて選択されます。 |
Interval |
number | IntervalType の倍数として表現される間隔。 |
IntervalType |
enumeration | 間隔の時間単位。 |
Range |
number | ラベル書式設定に適用するミリ秒で表される軸範囲しきい値。 |
以下のコード スニペットは、igDataChart コントロールで各 IntervalType の Interval を実装する方法を紹介します。この結果は、以下の図 3 に示されます。
<script type="text/javascript">
$(function () {
$("#chart").igDataChart({
dataSource: data,
axes: [{
type: "time",
name: "xAxis",
dateTimeMemberPath: "Date",
intervals: [
{
intervalType: "Seconds",
interval: 36,
Range: 1000
},
{
intervalType: "Minutes",
interval: 5,
Range: 60 * 1000
},
{
intervalType: "Hours",
interval: 1,
Range: 60 * 60 * 1000
},
{
intervalType: "Days",
interval: 12,
Range: 24 * 60 * 60 * 1000
},
{
intervalType: "Months",
interval: 12,
Range: 365.24 * 24 * 60 * 60 * 1000
},
{
intervalType: "Years",
interval: 1,
Range: 5 * 365 * 24 * 60 * 60 * 1000
}],
},
});
});
</script>
図 4: 48 時ごとにデータを表示する TimeXAxis。
以下のトピックでは、このトピックに関連する追加情報を提供しています。
igDataChart コントロールをページに追加し、データにバインドする方法を紹介します。以下のサンプルでは、このトピックに関連する追加情報を提供しています。
igDataChart コントロールで時間 X 軸の軸ブレーク機能を紹介します。オンラインで表示: GitHub