デカルト軸(CartesianAxes)

更新日: 2019-12-06

デカルト格子(矩形格子)に沿った軸は「デカルト軸」として知られています。デカルト軸は、折れ線グラフ、棒グラフ、バブルチャートで使われます。 Chart.jsには以下の4種類のデカルト軸が用意されています。

設定オプション

全てにデカルト軸にはいくつかのオプションがサポートされています。

名称	type	初期値	説明
`type`	`string`		使用する軸タイプ。カスタムスケールを作成して登録することができます。これでチャートの軸タイプを変更することができます。
`position`	`string`		チャート内の軸の位置。 `top`、`left`、`bottom`、`right`を指定することができます。
`offset`	`boolean`	`false`	`true`の場合、両端に拡張スペースを追加し、軸をチャート内に合わせてスケールします。棒グラフでは`true`が初期値です。
`id`	`string`		データセットとスケール軸をリンクさせるIDを設定します。詳しくはこちら
`gridLines`	`object`		グリッド線の設定。詳しくはこちら
`scaleLabel`	`object`		スケールのタイトル設定。詳しくはこちら
`ticks`	`object`		目盛線設定。詳しくはこちら

目盛線設定

以下のオプションは、全てデカルト軸で共通ですが、他の軸では適用されません。

名称	type	初期値	説明
`min`	`number`		目盛りの最小値を定義しデータの最小値を上書きします。
`max`	`number`		目盛りの最大値を定義しデータの最大値を上書きします。
`sampleSize`	`number`	`ticks.length`	ラベルの数を決定する際に対象とする目盛りの数。小さな値を指定すると速くなりますが、ラベルの長さにばらつきがある場合に精度が低下する恐れがあります。
`autoSkip`	`boolean`	`true`	`true`の場合、表示可能なラベル数を計算し、それに応じてラベルを非表示にします。 `false`の場合、全てのラベルを表示します。
`autoSkipPadding`	`number`	`0`	`autoSkip`が有効な場合、横軸の目盛線間隔を埋めます。注意：水平スケールの場合のみ適用されます。
`labelOffset`	`number`	`0`	目盛線の中心点からのラベルまでの(X軸のY方向と、Y軸のX方向の)オフセット(px)。注意：この設定によっては端のラベルが切れてしまう場合があります。
`maxRotation`	`number`	`90`	ラベルを回転して詰める場合の最大回転角度。注意：不要な場合は回転しません。注意：水平スケールの場合のみ適用されます。
`minRotation`	`number`	`0`	ラベルの最低回転角度。注意：水平スケールの場合のみ適用されます。
`mirror`	`boolean`	`false`	目盛りラベルをチャートの外側ではなく、チャートの内側に表示します。注意：垂直スケールの場合のみ適用されます。
`padding`	`number`	`10`	目盛りラベルと軸のスペースを指定します。 Y軸(垂直軸)を設定している場合、X方向(水平方向)に適用されます。 X軸(水平軸)を設定している場合、Y方向(垂直方向)に適用されます。

AxisID

dataset.xAxisIDプロパティとdataset.yAxisIDプロパティは、スケールプロパティのscales.xAxes.id、scales.yAxes.idに一致しなければなりません。特に多軸チャートでは必須です。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // このデータセットは1つめの軸になります。
            yAxisID: 'first-y-axis'
        }, {
            // このデータセットは2つめの軸になります。
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            yAxes: [{
                id: 'first-y-axis',
                type: 'linear'
            }, {
                id: 'second-y-axis',
                type: 'linear'
            }]
        }
    }
});

多軸チャート

デカルト軸では、複数のX/Y軸を生成することができます。複数の軸を生成するには、xAxesプロパティとyAxesプロパティに、複数の設定オブジェクトを追加します。新しい軸を追加する場合、デフォルトの軸タイプが適用されません。そのため、新しい軸タイプを指定する必要があります。

以下の例では、2つのY軸を生成しています。 yAxisIDプロパティを使って、データセットに対して正しい軸を設定しています。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset'

            // データセットに'left-y-axis'を設定します。
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0]
            label: 'Right dataset'

            // データセットに'right-y-axis'を設定します。
            yAxisID: 'right-y-axis',
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left'
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right'
            }]
        }
    }
});

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。