如何在Chart.js v2中使用两个Y轴？

Question

我正在尝试使用Chart.js创建一个包含两个数据集的折线图,每个数据集都有自己的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
      }
    ]
  }
});

但是,第二个轴不可见,第二个数据集仍然与第一个完全相同(0到100而不是0到1).我需要改变什么？

Answer 1

对于ChartJs 2.x,只需要进行一些更改(看起来你试图将2.x选项与我的fork中的多轴选项结合起来？),

• 该yAxes字段需要在一个scales对象中
• yAxis由id而不是name引用.
• 对于缩放步长/大小,您只需将这些选项包装在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
        }
      }]
    }
  }
});

小提琴的例子

Answer 2

从 3.5 开始，接受的答案不再有效，原因被列为 3.X 重大更改的一部分（请参阅3.x 迁移指南）

下面更新的代码将scales属性从更改scales: {yScales: [...]}为scales: {[id]: {[options]}}，并且还添加了fill: true,（在 3.X 中从默认更改为true）和tension: 0.4（之前提供的示例确实具有平滑的曲线，并且似乎这是一个未记录的“破坏性”更改）

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