1. ホーム
  2. javascript

[解決済み] Chart.js v2で2つのY軸を使用するには?

2023-01-19 16:35:39

質問

Chart.jsを使って、2つのデータセットで、それぞれY軸を持つ折れ線グラフを作成しようとしています(グラフの左側と右側)。

これは私のコードです ( jsfiddle ):

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: [ '1', '2', '3', '4', '5' ],
    datasets: [
      {
        label: 'A',
        yAxesGroup: 'A',
        data: [ 100, 96, 84, 76, 69 ]
      },
      {
        label: 'B',
        yAxesGroup: 'B',
        data: [ 1, 1, 1, 1, 0 ]
      }
    ]
  },
  options: {
    yAxes: [
      {
        name: 'A',
        type: 'linear',
        position: 'left',
        scalePositionLeft: true
      },
      {
        name: 'B',
        type: 'linear',
        position: 'right',
        scalePositionLeft: false,
        min: 0,
        max: 1
      }
    ]
  }
});

しかし、2番目の軸は表示されず、2番目のデータセットは1番目のデータセットと同じように正確にスケーリングされたままです(0から1ではなく0から100)。何を変更する必要があるのでしょうか?

どのように解決するのですか?

ChartJs 2.x では、2 つの変更のみが必要です (2.x のオプションと私のフォークからの多軸オプションを組み合わせようとしたように見えますか?)。

  • yAxes フィールドは scales オブジェクトである必要があります。
  • yAxisは名前ではなくidで参照されます。
  • スケールステップ/サイズについては、これらのオプションを ticks オブジェクトで囲むだけです。
  • は必要ありません。 scalePositionLeft でカバーされます。 position

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    }
  }
});

フィドルの例