如何獲取使用chartjs創建的畫布圖的數據屬性

大家好我正在使用ChartJs來創建charts.i設置一些數據屬性在canvas.on點擊圖表我需要獲得分配的數據屬性canvas.i在文檔中找到了一個方法，我用它來獲取點擊圖表區域的標籤和值，但我不知道如何獲取數據屬性。如何獲取使用chartjs創建的畫布圖的數據屬性

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> Pie Chart </title> 
 
    <style> 
 
     .pie-chart-canvas-wrapper{ 
 
     box-sizing:border-box; 
 
     width:500px; 
 
     height:300px; 
 
     float:left; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    
 
    <div id="pie-charts-whole-wrapper" > 
 
     <div class="pie-chart-canvas-wrapper"> 
 
      <canvas data-region="RO1" data-role="sales" width="500px" height="300px" id="pie1" ></canvas> 
 
     </div> 
 
    </div> <!--/ Pie Charts whole Wrapper --> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
    <script> 
 
     var ctx1 = document.getElementById("pie1"); 
 
     var pieChart1 = new Chart(ctx1, { 
 
      type: 'pie', 
 
      data: { 
 
       labels: ["signed", "Not Signed"], 
 
       datasets: [ 
 
        { 
 
         data: [20, 50], 
 
         backgroundColor:['#2ecc71','#34495e'] 
 
        } 
 
       ] 
 
      } 
 
     }); 
 

 
     ctx1.onclick = function(evt) { 
 
      var activePoints = pieChart1.getElementsAtEvent(evt); 
 
      if (activePoints[0]) { 
 
      var chartData = activePoints[0]['_chart'].config.data; 
 
      var idx = activePoints[0]['_index']; 
 

 
      var label = chartData.labels[idx]; 
 
      var value = chartData.datasets[0].data[idx]; 
 
      
 
      console.log(label); 
 
      console.log(value); 
 

 
      } 
 
     }; 
 

 
    </script> 
 
</body> 
 
</html>

來源

2017-08-16 codegeek

使用jQuery $（「元素」）數據（）應該給你的所有屬性，我也注意到你沒有在你的代碼進口jQuery的，但問題是標籤JQuery的，是那是故意的？ – jidexl21

如果你想要得到的屬性data-role，.getAttribute()正在做的工作。

console.log(this.getAttribute("data-role"));

CodePen

來源

2017-08-16 14:43:38

如何獲取使用chartjs創建的畫布圖的數據屬性

回答

相關問題