具有2个y轴的Chart.js

Question

我正在尝试让我的简单图表在两侧有相同的y轴显示，如果不添加另一个图表，我似乎无法获得正确的结果。

有没有可能只用一张图就能让它工作？

data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
        label: 'My First dataset',
        data: [0, 10, 5, 2, 10, 15, 5],
        pointBorderWidth: 2,
        yAxisID: 'A'

    },{
        // This dataset appears on the second axis
        yAxisID: 'B',
    }]
},

// Configuration options go here
options: {
  scales: {
    xAxes: [{
        gridLines: {
            display:false
        }
    }],
    yAxes: [{
        id: 'B',
        position: 'right',
        gridLines: {
            zeroLineColor:'#131c2b'
        }   
    },{
        id: 'A',
        position: 'left',
        gridLines: {
            zeroLineColor:'#131c2b'
        }   
    },]
  }
}

Answer 1

我通过更新正确的yAxis最小值和最大值使其正常工作。现在它只在开始时更新，所以它没有响应。您必须在每次更改图表时调用updateOptions() (例如，当您隐藏数据集时)...

Here is my code (JSBin)

function updateOptions() {
  chart.options.scales.yAxes[1].ticks = {
    min: chart.scales.A.ticksAsNumbers[chart.scales.A.ticksAsNumbers.length-1],
    max: chart.scales.A.ticksAsNumbers[0]
  }
  chart.update()
}