具有2个y轴的Chart.js

问题描述 投票:0回答:1

[我正在尝试让我的简单图表在两侧都显示相同的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'
        }   
    },]
  }
}
chart.js
1个回答
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()
}
© www.soinside.com 2019 - 2024. All rights reserved.