直交座標系

直交グリッドを持つ軸は直交座標軸と呼ばれます。 直交座標軸は、線グラフ、棒グラフ、およびバブルチャートに使用されます。 Chart.jsには4つの直交座標軸が始めから組み込まれています。

共通設定

組み込み済みの軸のすべてで、多くの共通設定を提供しています。

名前 型 初期値 説明
type String 使用されるスケールのタイプ。カスタムスケールを作成し、文字列キーで登録することができます。これにより、グラフの軸のタイプを変更することができます。
position String グラフ内の軸の位置。可能な値は 'top', 'left', 'bottom', 'right'です。
offset Boolean false trueの場合、余分なスペースが両端に追加され、軸はグラフ領域に収まるように拡大/縮小されます。これはカテゴリスケールの棒グラフではデフォルトで trueに設定されています。
id String このIDは、データセットとスケール軸をリンクするために使用されます。詳細...
gridLines Object グリッド線設定。詳細...
scaleLabel Object スケールタイトル設定。詳細...
ticks Object 目盛の設定。 詳細...

目盛設定

次の設定はすべての直交座標軸に共通ですが、他の座標軸には適用されません。

名前 型 初期値 説明
autoSkip Boolean true trueの場合、表示可能なラベルの数が自動的に計算され、それに応じてラベルが非表示になります。falseにするとどんな時でもすべてのラベルを表示します。
autoSkipPadding Number 0 autoSkipが有効になっているときの水平軸上の目盛間のパディング。注: 水平スケールにのみ適用されます。
labelOffset Number 0 ピクセル単位の距離で、目盛の中心点からラベルをずらします（x軸ではy方向、y軸ではx方向へ）。注: キャンバスの端でラベルの端が切り取られる可能性があります
maxRotation Number 90 回転してラベルを詰めて表示する際の目盛ラベルの最大回転角(°)。注：回転は必要になるまで発生しません。注：水平スケールにのみ適用されます。
minRotation Number 0 目盛ラベルの最小回転角(°)。 注：水平スケールにのみ適用されます。
mirror Boolean false 軸周りに目盛ラベルをひっくり返すことで、ラベルをグラフの外側の代わりにグラフの内側に表示します。注：垂直スケールにのみ適用されます。
padding Number 10 目盛ラベルと軸の間のパディング。垂直軸に設定すると、水平（X）方向に適用されます。水平軸に設定すると、垂直（Y）方向に適用されます。

軸ID

dataset.xAxisIDまたはdataset.yAxisIDプロパティは、スケールプロパティscales.xAxes.idまたはscales.yAxes.idと一致しなければなりません。これは、多軸チャートを使用する場合に特に必要となります。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // このデータセットは最初の軸に表示されます
            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',

            // これはデータセットを左のy軸に結びつけます
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',

            // これはデータセットを右のy軸に結びつけます
            yAxisID: 'right-y-axis',
        }],
        labels: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    options: {
        scales: {
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left'
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right'
            }]
        }
    }
});

results matching ""

    No results matching ""