データがChart.jsに表示されない場合のY軸ラベルの非表示

Question

2つのデータセット：合計SQLクエリと低速SQLクエリを表示するChart.js棒グラフがあります。私はそれぞれのデータセットごとにY軸ラ​​ベルを持っています。下のグラフは見ることができます。

Iは、対応する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(); 
     } 
     } 
    }