新しい軸

Chart.jsの軸は個別に拡張できます。軸は常にChart.Scaleから派生するべきですが、これは必須要件ではありません。

let MyScale = Chart.Scale.extend({
    /* 拡張 ... */
});

//  MyScaleはChart.Scaleから派生しました。

スケールクラスを作成したら、それを使用できるようにグローバルクラスオブジェクトに登録する必要があります。コンストラクタの登録時に、スケールのデフォルト設定が提供されます。レジスタ関数の最初のパラメータは、後でチャートに使用するスケールタイプを識別するために使用される文字列キーです。

Chart.scaleService.registerScaleType('myScale', MyScale, defaultConfigObject);

新しいスケールを使用するには、チャートを作成するときに文字列キーを設定に渡します。

var lineChart = new Chart(ctx, {
    data: data,
    type: 'line',
    options: {
        scales: {
            yAxes: [{
                type: 'myScale' // これはregisterScaleType関数に渡されたキーと同じです
            }]
        }
    }
})

スケールプロパティ

スケールインスタンスには、フィッティングプロセス中に以下のプロパティが与えられます。

{
    left: Number, // スケール境界ボックスの左端
    right: Number, // 境界ボックスの右端
    top: Number,
    bottom: Number,
    width: Number, // right - leftと同じ
    height: Number, // bottom - topと同じ

    // 各端の余白。 CSSのように、これはバウンディングボックスの外にあります。
    margins: {
        left: Number,
        right: Number,
        top: Number,
        bottom: Number,
    },

    // バウンディングボックスの内部のパディングの量（CSSと同じ）
    paddingLeft: Number,
    paddingRight: Number,
    paddingTop: Number,
    paddingBottom: Number,
}

スケールインターフェース

カスタムスケールタイプをChart.jsで使うには、次のインターフェイスを実装する必要があります。

{
    // データの制限を定義します。 this.minとthis.maxをデータの最大値/最小値として設定する必要があります
    determineDataLimits: function() {},

    // 目盛を生成します。this.chartはチャートインスタンスです。データオブジェクトはthis.chart.dataとしてアクセスできます。
    // 基本クラスからの実装を使用する場合は、buildTicks()は、軸インスタンスに目盛配列を作成する必要があります
    buildTicks: function() {},

    // 指定されたデータセットの指定されたインデックスにあるデータ、つまりthis.chart.data.datasets[datasetIndex].data[index]で表示する値を取得します。
    getLabelForIndex: function(index, datasetIndex) {},

    // 指定された値のピクセル（水平軸の場合はx座標、垂直軸の場合はy座標）を取得します
    // @param index: 目盛配列のインデックス
    // @param includeOffset: trueの場合、指定された目盛と次の点の中間のピクセルを取得します。
    getPixelForTick: function(index, includeOffset) {},

    // 指定された値のピクセル（水平軸の場合はx座標、垂直軸の場合はy座標）を取得します
    // パラメータ値：ピクセルを取得する値
    // @param index：データ配列のインデックス
    // @param datasetIndex：データセットのインデックス
    // @param includeOffset: trueの場合、指定された目盛と次の点の中間のピクセルを取得します。
    getPixelForValue: function(value, index, datasetIndex, includeOffset) {}

    // 指定されたピクセルの値を取得する（水平軸のx座標、垂直軸のy座標）
    // @param pixel：ピクセル値
    getValueForPixel: function(pixel) {}
}

次のメソッドも上書きすることができますが、Chart.Scaleベースクラスによって既に実装されています。

    // スケールインスタンスの目盛配列を文字列に変換します。デフォルトの実装ではthis.options.ticks.callback（numericTick、index、ticks）を呼び出すだけです。
    convertTicksToLabels: function() {},

    // ラベルの回転量を決定する。デフォルトの実装では、スケールが水平の場合にのみラベルが回転します。
    calculateTickRotation: function() {},

    // スケールをキャンバスに合わせます。
    // this.maxWidthとthis.maxHeightは、スケールインスタンスの可能な最大寸法を示します。スケールは、キャンバス空間で可能な限り効率的になるように努力する必要があります。
    // this.marginsは、スケールを拡大しようとするのどちらか一方側にあるスペースの量です。これは、最良のラベル回転を計算するために既に使用されています
    // this.minSizeをスケールのサイズに設定する必要があります。widthとheightの2つのプロパティを含むオブジェクトでなければなりません。
    // this.widthを幅に、this.heightをスケールの高さに設定する必要があります
    fit: function() {},

    // スケールをキャンバスに描画します。this.(left|right|top|bottom)により、描画されるキャンバス上の領域が分かります
    // @param chartArea : left、right、top、bottomの4つのプロパティを含むオブジェクトです。これは、線、棒などが描画される矩形です。たとえば、グリッド線を描画するために使用できます。
    draw: function(chartArea) {},

Core.Scaleの基底クラスには、役に立つと思われるユーティリティ関数がいくつかあります。

{
    // スケールインスタンスが水平の場合にtrueを返します。
    isHorizontal: function() {},

     // this.chart.data.datasets[x].data[]の値から正しい値を取得します。
     // dataValueがオブジェクトの場合は、isHorizontal()の戻り値に応じて.xまたは.yを返します。
     // 値が未定義の場合はNaNを返します。
     // それ以外の場合は値を返します。
     // すべての場合において、返される値はNumberであることが保証されていないことに注意してください
    getRightValue: function(dataValue) {},
}