当数据从图表中隐藏时,如何隐藏/删除chartjs上的y轴? 如果用户通过点击图例隐藏所有数据集,y轴仍然存在,我想知道如果所有数据集都被隐藏,如何完全隐藏它。 这是chartjs代码。
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1510001367000, 1510001379000, 1510001415000, 1510001427000, 1510001443000, 1510001477000, 1510001555000, 1510001587000, 1510001621000, 1510001652000, 1510001680000, 1510001700000, 1510001712000, 1510001744000, 1510001756000, 1510001762000, 1510001768000, 1510001796000, 1510001805000, 1510001860000, 1510001888000, 1510001916000, 1510001952000, 1510001956000, 1510001984000, 1510002006000, 1510002016000, 1510002073000, 1510002185000, 1510002213000, 1510002253000, 1510002259000, 1510002283000, 1510002317000, 1510002325000, 1510002393000, 1510002494000, 1510002510000, 1510002554000, 1510002572000, 1510002588000, 1510002618000, 1510002634000, 1510002648000, 1510002658000, 1510002678000, 1510002694000, 1510002702000, 1510002722000, 1510002732000, 1510002782000, 1510002800000, 1510002808000, 1510002814000, 1510002830000, 1510002884000, 1510002947000, 1510002953000, 1510002979000, 1510002995000, 1510003039000, 1510003067000, 1510003097000, 1510003117000, 1510003127000, 1510003151000],
datasets: [
{
label: 'dataset 1',
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
data: [72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72]
},
{
label: 'dataset 2',
fill: false,
backgroundColor: 'rgb(54, 162, 235)',
data: [70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70]
}
]
},
options: {
responsive: true
}
});

.myChartDiv {
width: 600px;
height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="800"></canvas>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
有点晚了,但希望对某人有所帮助:
datasets: [
{
yAxisID: 'TOGGLE_yaxis1',
label: 'dataset 1',
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
data: [72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72]
},
{
yAxisID: 'yaxis2',
label: 'dataset 2',
fill: false,
backgroundColor: 'rgb(54, 162, 235)',
data: [70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70]
}
]
options:
{
responsive: true,
legend:{
display: true,
onClick: function(event, legendItem) {
var y_axis_id = MYCHART.data.datasets[legendItem.datasetIndex].yAxisID;
if(y_axis_id.startsWith('TOGGLE')){
//find by name yaxis
for(i=0;i<MYCHART.options.scales.yAxes.length;i++){
if(MYCHART.options.scales.yAxes[i].id==y_axis_id){
MYCHART.options.scales.yAxes[i].display = !MYCHART.options.scales.yAxes[i].display;
MYCHART.data.datasets[legendItem.datasetIndex].hidden = !MYCHART.data.datasets[legendItem.datasetIndex].hidden;
MYCHART.update();
}
}
}
},
scales: {
yAxes: [{
id: 'TOGGLE_yaxis1'
},{
id: 'yaxis2'
}]}
},