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


75

我正在尝试使用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)。我需要更改什么?

Answers:


175

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

小提琴的例子


1
当我打开小提琴时,两个轴都在那里,但是第二个数据集(B)仍未缩放到右轴(B),为什么不呢?
just.me,2016年

2
对不起,我的错字应该yAxisID不是yAxesID
Quince

@Quince嗨,Quince,但是如何在代码中应用两种不同类型的图表(折线图和条形图)。在此先感谢
Bcktr

1
@Bcktr肯定您可以将类型更改为条形。(或者您是否在同一张图中显示条形图和线形图?)目前不在电脑附近,但我认为应该可以使用。
昆斯

1
您知道如何通过数据自动设置刻度(最小/最大)吗?它适用于左轴,默认情况下,右轴为0-1
闪光
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.