使用多个Y轴的ChartJS

Question

我用两个数据集创建了一个折线图，每个数据集都有自己的Y比例尺&轴使用Chart.js.my数据集和选项代码如下所示。

datasets: [{ fill:false, 
    label: 'Heat', 
    yAxisID: "y-axis-1", 
    data: warm, 
     }, 
    { fill:false, 
     yAxisID: "y-axis-0", 
     label:'Mass', 
     data:volume, 
    ] 
    options:{ 
    scales: { 
    yAxes: [{ position: "left", 
    "id": "y-axis-0", 
    display: true, 
    ticks: { steps: 10, 
    stepValue: 5, 
    callback:(label,index,labels)=>{ return label + "%"; } } 
}, 
{ position: "right", 
    "id": "y-axis-1", 
    display: true, 
    ticks: { steps: 10, 
    stepValue: 5, 
    callback:(label,index,labels)=>{ return label + " c"; } } }] } 
} 

它看起来像下面这张图片。

当我切换质量标签时，左边的YAxes仍然出现。如果我切换标签，我想隐藏它。可否请您指导我解决此问题？

Answer 1

你可以做到这一点使用下面的chartjs插件...

Chart.plugins.register({ 
    beforeDraw: function(c) { 
     var canvas_id = c.chart.canvas.id; 
     if (canvas_id === 'myChart') { 
     if (c.data.datasets[0]._meta[0].hidden) { 
      c.options.scales.yAxes[1].display = false; 
     } else c.options.scales.yAxes[1].display = true; 
     if (c.data.datasets[1]._meta[0].hidden) { 
      c.options.scales.yAxes[0].display = false; 
     } else c.options.scales.yAxes[0].display = true; 
     } 
    } 
}); 

ᴅᴇᴍᴏ

Chart.plugins.register({ 
 
    beforeDraw: function(c) { 
 
     var canvas_id = c.chart.canvas.id; 
 
     if (canvas_id === 'myChart') { 
 
     if (c.data.datasets[0]._meta[0].hidden) { 
 
      c.options.scales.yAxes[1].display = false; 
 
     } else c.options.scales.yAxes[1].display = true; 
 
     if (c.data.datasets[1]._meta[0].hidden) { 
 
      c.options.scales.yAxes[0].display = false; 
 
     } else c.options.scales.yAxes[0].display = true; 
 
     } 
 
    } 
 
}); 
 

 
var canvas = document.getElementById('myChart'); 
 
var warm = [0, 0, 0, 0, 25, 25, 25, 25, 25, 25]; 
 
var volume = [98, 12, 0, 7, 7, 7, 7, 78, 62, 62]; 
 
var data = { 
 
    labels: ["23.05.2017 15:34:48", "23.05.2017 15:35:02", "23.05.2017 15:35:14", "23.05.2017 15:35:28", "23.05.2017 15:59:35", "23.05.2017 16:00:11", "23.05.2017 16:07:22", "23.05.2017 16:38:04", "23.05.2017 16:38:43", "23.05.2017 16:57:48"], 
 
    datasets: [{ 
 
     fill: false, 
 
     label: 'Heat', 
 
     pointHoverRadius: 5, 
 
     pointHitRadius: 5, 
 
     lineTension: 0, 
 
     yAxisID: "y-axis-1", 
 
     data: warm, 
 
     backgroundColor: "rgba(255,153,0,0.4)" 
 
    }, { 
 
     fill: false, 
 
     pointHoverRadius: 5, 
 
     pointHitRadius: 5, 
 
     lineTension: 0, 
 
     yAxisID: "y-axis-0", 
 
     label: 'Mass', 
 
     data: volume, 
 
     backgroundColor: "rgba(153,255,51,0.4)" 
 
    }] 
 
}; 
 
var option = { 
 
    maintainAspectRatio: false, 
 
    responsive: true, 
 
    bezierCurveTension: 0, 
 
    scales: { 
 
     xAxes: [{ 
 
     display: true, 
 
     ticks: { 
 
      maxTicksLimit: 3, 
 
      fontSize: 10 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     position: "left", 
 
     "id": "y-axis-0", 
 
     display: true, 
 
     ticks: { 
 
      steps: 10, 
 
      stepValue: 5, 
 
      //max: 100, 
 
      callback: (label, index, labels) => { 
 
       return label + "%"; 
 
      } 
 
     } 
 
     }, { 
 
     position: "right", 
 
     "id": "y-axis-1", 
 
     display: true, 
 
     ticks: { 
 
      steps: 10, 
 
      stepValue: 5, 
 
      //max: 100, 
 
      callback: (label, index, labels) => { 
 
       return label + " c"; 
 
      } 
 
     } 
 
     }] 
 
    } 
 
}; 
 
var myLineChart = Chart.Line(canvas, { 
 
    data: data, 
 
    options: option 
 
}); 
 

 
function adddata() { 
 
    myLineChart.data.datasets[0].data[7] = 50; 
 
    myLineChart.data.labels[7] = "test add"; 
 
    myLineChart.update(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="250"></canvas>

^{ChartJS v2.5.0}