2017-08-16 4 views
1

こんにちはすべて私はcharts.iを作成するためにChartJを使用しています。グラフをクリックする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>

+1

。データは()あなたのすべての属性を与える必要があり、私はまた、あなたのコードにインポートjqueryのを持っていけない、しかし質問はjQueryのタグ付けされた気付きですその意図的? – jidexl21

答えて

0

あなたは属性data-roleを取得したい場合は、.getAttribute()は仕事をしています。

jQueryの$(「要素」)を使用し
console.log(this.getAttribute("data-role")); 

CodePen

関連する問題