在Chart.js中未顯示數據時隱藏Y軸標籤

Question

我有一個顯示兩組數據的Chart.js條形圖：Total SQL Queries和Slow SQL Queries。每個相應的數據集都有Y軸標籤。該圖在下面可以看到：

當我切換組數據不顯示中的一個，對應的Y軸標籤仍然顯示。在解釋圖表時，這有點令人困惑。可以看出如下：

我的問題：如何隱藏任何數據集的Y軸標籤當前沒有顯示？

這是怎樣我現在有我的圖表設置：

<canvas id="SQLPerformanceChart" minHeight="400"></canvas> 
<script type="text/javascript"> 
    ... 
    var data = { 
     labels: labelArray, 
     datasets: [{ 
      label: "Total SQL Queries", 
      fill: false, 
      borderWidth: 1, 
      borderColor: "green", 
      backgroundColor: "rgba(0, 255, 0, 0.3)", 
      yAxisID: "y-axis-0", 
      data: totalQueriesArray 
     }, { 
      label: "Slow SQL Queries", 
      fill: false, 
      borderWidth: 1, 
      borderColor: "orange", 
      backgroundColor: "rgba(255, 255, 0, 0.3)", 
      yAxisID: "y-axis-1", 
      data: slowQueriesArray, 
     }] 
    }; 

    var options = { 
     animation: false, 
     scales: { 
      yAxes: [{ 
       position: "left", 
       ticks: { 
        beginAtZero: true 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Total SQL Queries' 
       }, 
       id: "y-axis-0" 
      }, { 
       position: "right", 
       ticks: { 
        beginAtZero: true 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Slow SQL Queries' 
       }, 
       id: "y-axis-1" 
      }] 
     }, 
     tooltips: { 
      enabled: true, 
      mode: 'single', 
      callbacks: { 
       title: function(tooltipItem, data) { 
        return data.label; 
       }, 
       beforeLabel: function(tooltipItem, data) { 
        if (tooltipItem.index == 24) { 
         return data.labels[tooltipItem.index] + " - Now"; 
        } else { 
         return data.labels[tooltipItem.index] + " - " + data.labels[(tooltipItem.index) + 1]; 
        } 
       } 
      } 
     } 
    } 

    var ctx = document.getElementById("SQLPerformanceChart"); 
    var SQLPerformanceChart = new Chart(ctx, { 
     type: 'bar', 
     data: data, 
     options: options 
    }); 
</script> 

Answer 1

您可以添加一個回調函數的onClick傳說：

var options = { 
     animation: false, 
     scales: { 
      yAxes: [{ 
       position: "left", 
       ticks: { 
        beginAtZero: true 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Total SQL Queries' 
       }, 
       id: "y-axis-0" 
      }, { 
       position: "right", 
       ticks: { 
        beginAtZero: true 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Slow SQL Queries' 
       }, 
       id: "y-axis-1" 
      }] 
     }, 
     legend: { 
     onClick: function(event, legendItem) { 
      //get the index of the clicked legend 
      var index = legendItem.datasetIndex; 
      //toggle chosen dataset's visibility 
      SQLPerformanceChart.data.datasets[index].hidden = 
       !SQLPerformanceChart.data.datasets[index].hidden; 
      //toggle the related labels' visibility 
      SQLPerformanceChart.options.scales.yAxes[index].display =     
       !SQLPerformanceChart.options.scales.yAxes[index].display; 
      SQLPerformanceChart.update(); 
     } 
     } 
    }