Chart.js：單擊它時可以在堆疊條形圖中獲取數據集的標籤嗎？

Question

我試圖在點擊特定數據集的堆棧時，在堆積條形圖中獲取與數據集關聯的標籤的名稱。

這是我的代碼：

var dataPack1 = [100, 200, 300, 400, 500]; 
    var dataPack2 = [150, 450, 350, 250, 150]; 
    var dates = ["May 1", "May 2", "May 3", "May 4", "May 5"]; 
    var bar_chart = new Chart(bar_ctx, { 
     type: 'bar', 
     data: { 
      labels: dates, 
      datasets: [ 
      { 
       label: 'Bowser', 
       data: dataPack1, 
       backgroundColor: "grey"      
      }, 
      { 
       label: 'Mario', 
       data: dataPack2, 
       backgroundColor: "maroon" 
      }, 
      ] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
       stacked: true, 
       gridLines: { display: false }, 
       }], 
       yAxes: [{ 
       stacked: true 
       }], 
      }, // scales 
      onClick: function(evt, element) { 
       //var val = element.something such that val is assigned 'Bowser' 
      } 
     } // options 
     } 
    ); 

現在，當我點擊說，500，我想一個變量，VAL獲得分配的 '庫巴'。那可能嗎？

Here是它的jsfiddle。

Answer 1

您可以使用原型法.getElementAtEvent(e)來獲取點擊的元素上像這樣

onClick: function(evt, element) { 
    var activePoints = bar_chart.getElementAtEvent(evt); 
    console.log(activePoints[0]._model.datasetLabel); 
} 

JSFiddle

或者，你可以將它作爲一個事件處理程序的圖表元素上

bar_ctx.onclick = function(evt) { 
    var activePoints = bar_chart.getElementAtEvent(evt); 
    console.log(activePoints[0]._model.datasetLabel); 
}; 

JSFiddle