New Axes

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をdataの最大値/最小値に設定する必要があります。
    determineDataLimits: function() {},

    // 目盛線の生成。this.chartはチャートのインスタンスです。dataオブジェクトはthis.chart.dataにアクセスすることができます。
    // buildTicks()は、任意のベースクラスの実装を使用する場合には、axisインスタンスで目盛線配列を生成する必要があります。
    buildTicks: function() {},

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

    // 指定された値のピクセル(横軸のX座標、縦軸のX座標)を取得します。
    // @param index: 目盛線配列のインデックス
    // @param includeOffset: trueの場合、目盛線間のピクセルを取得します。
    getPixelForTick: function(index, includeOffset) {},

    // 指定された値のピクセル(横軸のX座標、縦軸のX座標)を取得します。
    // @param value : ピクセルを取得するための値
    // @param index : 値のデータ配列内でのインデックス
    // @param datasetIndex : 値が含まれるデータセットのインデックス
    // @param includeOffset : trueの場合、目盛線間のピクセルを取得します。
    getPixelForValue: function(value, index, datasetIndex, includeOffset) {}

    // 指定されたピクセルの値を取得します。(横軸のX座標、縦軸のX座標)
    // @param pixel : ピクセル
    getValueForPixel: function(pixel) {}
}

必要に応じて、以下のメソッドを上書きすることもできますが、 実装はすでにChart.Scaleクラスによって提供されています。

{
  // scaleインスタンスの目盛線配列を文字列に変換します。
  // デフォルトの実装はthis.options.ticks.callback(numericalTick, index, ticks);を呼び出すだけです。
  convertTicksToLabels: function() {},
  
  // ラベルをどのくらい回転させるかを決めます。
  // デフォルトでは、スケールが水平の場合のみ回転します。
  calculateTickRotation: function() {},
  
  // スケールをキャンバスに合わせます。
  // this.maxWidthとthis.maxHeightは、scaleインスタンスが取ることが出来る最大寸法を示します。スケールは可能な限りキャンバス内で最大になるようにしなければなりません。
  // this.marginsは拡大する場合に、スケールの両側に指定するスペース幅です。これは最適なラベルの回転角度を計算するためにすでに使われています。
  // this.minSizeをスケールのサイズに設定する必用があります。 widthとheightの2つのプロパティを含めたオブジェクトでなければなりません。
  // this.widthにスケールのwidth、this.heightにスケールのheightを設定する必要があります。
  fit: function() {},
  
  // スケールをcanvasに描画します。this.(left|right|top|bottom)はcanvasの描画領域を示すために存在しています。
  // @param chartArea : 4つのプロパティ(left、right、top、bottom)が含まれたオブジェクトです。これは線や、棒が描写される領域です。例えばグリッド線を表示する場合に使います。
  draw: function(chartArea) {},
}

Core.Scaleのベースクラスには、便利なユーティリティ関数があります。

{
    // スケールインスタンスが水平ならtureを返します。
    isHorizontal: function() {},

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

    // スケール目盛りオブジェクトを返します。({label, major})
    getTicks: function() {}
}