# 軸

軸はチャートの不可欠な部分です。データがチャート上のピクセル値にどのようにマッピングされるかを決定するために使用されます。直交座標チャートでは、点を2次元キャンバスにマッピングするために、1つ以上のX軸と1つ以上のY軸があります。これらの軸は、'直交座標軸'と呼ばれます。

レーダーチャートや極座標エリアチャートなどの極座標チャートでは、角度方向と半径方向に点をマッピングする軸が1つあります。これらは'極座標軸'と呼ばれます。

Chart.js v2.0以降のスケールは、大幅に強力になりましたが、v1.0のスケールとは異なります。

複数のX軸とY軸がサポートされています。
組み込みのラベル自動スキップ機能は、重複する可能性のある目盛りとラベルを検出し、n番目のラベルを削除して、正常に表示されるようにします。
スケールタイトルがサポートされています。
まったく新しいチャートタイプを作成することなく、新しいスケールタイプを拡張できます。

# デフォルトのスケール

直交座標チャートのデフォルトの`scaleId`は`'x'`と`'y'`です。極座標チャートの場合：`'r'`。各データセットは、必要な軸（x、y、またはr）ごとにスケールにマッピングされます。データセットがマッピングされる`scaleId`は、`xAxisID`、`yAxisID`、または`rAxisID`によって決定されます。軸のIDが指定されていない場合、その軸の最初のスケールが使用されます。軸のスケールが見つからない場合は、新しいスケールが作成されます。

いくつかの例

次のチャートには、`'x'`と`'y'`のスケールがあります

let chart = new Chart(ctx, {
  type: 'line'
});

次のチャートには、`'x'`と`'myScale'`のスケールがあります

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      data: [1, 2, 3]
    }]
  },
  options: {
    scales: {
      myScale: {
        type: 'logarithmic',
        position: 'right', // `axis` is determined by the position as `'y'`
      }
    }
  }
});

次のチャートには、`'xAxis'`と`'yAxis'`のスケールがあります

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      yAxisID: 'yAxis'
    }]
  },
  options: {
    scales: {
      xAxis: {
        // The axis for this scale is determined from the first letter of the id as `'x'`
        // It is recommended to specify `position` and / or `axis` explicitly.
        type: 'time',
      }
    }
  }
});

次のチャートには、`'r'`スケールがあります

let chart = new Chart(ctx, {
  type: 'radar'
});

次のチャートには、`'myScale'`スケールがあります

let chart = new Chart(ctx, {
  type: 'radar',
  scales: {
    myScale: {
      axis: 'r'
    }
  }
});

# 共通設定

注記

これらは、すべての軸でサポートされている共通オプションのみです。その軸で使用可能なすべてのオプションについては、特定の軸のドキュメントを参照してください。

# すべての軸に共通のオプション

名前空間：`options.scales[scaleId]`

名前	タイプ	デフォルト	説明
`type`	`文字列`		使用されているスケールの種類。カスタムスケールを作成し、文字列キーで登録できます。これにより、チャートの軸の種類を変更できます。
`alignToPixels`	`ブール値`	`false`	ピクセル値をデバイスピクセルに合わせる。
`backgroundColor`	`色`		スケール領域の背景色。
`border`	`オブジェクト`		境界線の設定。詳細...
`display`	`ブール値`\|`文字列`	`true`	軸の全体的な表示を制御します（`true`の場合は表示、`false`の場合は非表示）。`display：'auto'`の場合、軸は少なくとも1つの関連付けられたデータセットが表示されている場合にのみ表示されます。
`grid`	`オブジェクト`		グリッド線設定。詳細...
`min`	`数値`		ユーザー定義のスケールの最小値。データの最小値をオーバーライドします。詳細...
`max`	`数値`		ユーザー定義のスケールの最大値。データの最大値をオーバーライドします。詳細...
`reverse`	`ブール値`	`false`	スケールを反転する。
`stacked`	`ブール値`\|`文字列`	`false`	データを積み重ねる必要があるかどうか。詳細...
`suggestedMax`	`数値`		最大データ値の計算に使用される調整値。詳細...
`suggestedMin`	`数値`		最小データ値の計算に使用される調整値。詳細...
`ticks`	`オブジェクト`		目盛りの設定。詳細...
`weight`	`数値`	`0`	軸のソートに使用される重み。重みが大きいほど、チャート領域から遠くなります。

# 目盛りの設定

注記

これらは、すべての軸でサポートされている共通の目盛りオプションのみです。その軸で使用可能なすべての目盛りオプションについては、特定の軸のドキュメントを参照してください。

# すべての軸に共通の目盛りオプション

名前空間：`options.scales[scaleId].ticks`

名前	タイプ	スクリプト可能	デフォルト	説明
`backdropColor`	`色`	はい	`'rgba(255, 255, 255, 0.75)'`	ラベルの背景色。
`backdropPadding`	`パディング`		`2`	ラベルの背景のパディング。
`callback`	`関数`			チャートに表示される目盛り値の文字列表現を返します。コールバックを参照してください。
`display`	`ブール値`		`true`	trueの場合、目盛りラベルを表示します。
`color`	`色`	はい	`Chart.defaults.color`	目盛りの色。
`font`	`フォント`	はい	`Chart.defaults.font`	フォントを参照してください
`major`	`オブジェクト`		`{}`	主目盛りの設定.
`padding`	`数値`		`3`	軸からの目盛りラベルのオフセットを設定します
`showLabelBackdrop`	`ブール値`	はい	ラジアルスケールの場合は`true`、それ以外の場合は`false`	trueの場合、目盛りラベルの背後に背景を描画します。
`textStrokeColor`	`色`	はい	``	テキストの周りのストロークの色。
`textStrokeWidth`	`数値`	はい	`0`	テキストの周りのストロークの幅。
`z`	`数値`		`0`	目盛りレイヤーのz-index。目盛りがチャート領域に描画される場合に便利です。値<= 0はデータセットの下に、> 0は上に描画されます。

# 軸範囲の設定

軸範囲の設定が多数あるため、それらがすべてどのように相互作用するかを理解することが重要です。

`suggestedMax`と`suggestedMin`の設定は、軸のスケーリングに使用されるデータ値のみを変更します。これらは、自動調整動作を維持しながら、軸の範囲を拡張する場合に便利です。

let minDataValue = Math.min(mostNegativeValue, options.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.suggestedMax);

この例では、最大の正の値は50ですが、データの最大値は100に拡張されています。ただし、最小データ値は`suggestedMin`設定よりも小さいため、無視されます。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            y: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

`suggested *`設定とは対照的に、`min`と`max`の設定は、軸の明示的な端を設定します。これらが設定されている場合、一部のデータポイントが表示されないことがあります。

# スタッキング

デフォルトでは、データはスタックされません。値スケール（横棒グラフのy軸）の`stacked`オプションが`true`の場合、正の値と負の値は別々にスタックされます。さらに、スタックグループに分割するために、データセットごとに`stack`オプションを定義できます詳細...。一部のチャートでは、正の値と負の値を一緒にスタックしたい場合があります。これは、`stacked：'single'`を指定することで実現できます。

# コールバック

更新プロセスのさまざまなポイントでスケールのパラメーターを変更するために使用できる多くの設定コールバックがあります。オプションは、軸オプションの最上位レベルで提供されます。

名前空間：`options.scales[scaleId]`

名前	引数	説明
`beforeUpdate`	`axis`	更新プロセスが開始される前に呼び出されるコールバック。
`beforeSetDimensions`	`axis`	寸法が設定される前に実行されるコールバック。
`afterSetDimensions`	`axis`	寸法が設定された後に実行されるコールバック。
`beforeDataLimits`	`axis`	データ制限が決定される前に実行されるコールバック。
`afterDataLimits`	`axis`	データ制限が決定された後に実行されるコールバック。
`beforeBuildTicks`	`axis`	目盛りが作成される前に実行されるコールバック。
`afterBuildTicks`	`axis`	目盛りが作成された後に実行されるコールバック。目盛りをフィルタリングする場合に便利です。
`beforeTickToLabelConversion`	`axis`	目盛りが文字列に変換される前に実行されるコールバック。
`afterTickToLabelConversion`	`axis`	目盛りが文字列に変換された後に実行されるコールバック。
`beforeCalculateLabelRotation`	`axis`	目盛りの回転が決定される前に実行されるコールバック。
`afterCalculateLabelRotation`	`axis`	目盛りの回転が決定された後に実行されるコールバック。
`beforeFit`	`axis`	スケールがキャンバスに収まる前に実行されるコールバック。
`afterFit`	`axis`	スケールがキャンバスに収まった後に実行されるコールバック。
`afterUpdate`	`axis`	更新プロセスの最後に実行されるコールバック。

# 軸のデフォルトの更新

スケールのデフォルト設定は簡単に変更できます。`Chart.defaults.scales [type]`に新しいオプションを設定するだけです。

たとえば、すべての線形スケールの最小値を0に設定するには、次のようにします。この後

Chart.defaults.scales.linear.min = 0;

# 新しい軸の作成

新しい軸を作成するには、開発者向けドキュメントを参照してください。

← 散布図直交座標軸 →