如何在图表中使用两个Y轴。js v2吗?

I am trying to create a line chart with two datasets, each with its own Y scale / axis (one to the left, one to the right of the graph) using Chart.js.

我正在尝试创建一个带有两个数据集的行图，每个数据集都有自己的Y刻度/轴(一个到左边，一个在图的右边)。

This is my code (jsfiddle):

这是我的代码(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
      }
    ]
  }
});

However, the second axis is not visible and the second dataset is still scaled exactly as the first (0 to 100 instead of 0 to 1). What do I need to change?

但是，第二轴是不可见的，第二个数据集仍然按第一个(0到100而不是0到1)缩放，我需要改变什么?

1 个解决方案

#1

For ChartJs 2.x only a couple changes need to be made (it looks like you have tried to combine 2.x options with the multi-axes options from my fork?),

ChartJs 2。只需要做一些更改(看起来您已经尝试合并了2)。x选项与多轴选项从我的叉子?)，

The yAxes field needs to be in a scales object
yAxes字段需要在一个scale对象中。
the yAxis is referenced by id not name.
yAxis是由id而不是名称引用的。
For the scale steps/size you just need to wrap these options in a ticks object.
对于scale步骤/大小，您只需要将这些选项封装到一个蜱对象中。
No need forscalePositionLeft this is covered by position
不需要做scalepositionleft这是被位置覆盖的。

Example:

例子:

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
        }
      }]
    }
  }
});

fiddle example

小提琴的例子

#1