如何获取使用chartjs创建的canvas图表的数据属性答案

【问题标题】：How to get the data attribute of the canvas chart created using chartjs如何获取使用chartjs创建的canvas图表的数据属性
【发布时间】：2018-01-24 17:55:38
【问题描述】：

大家好，我正在使用 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>

【问题讨论】：

使用 jquery $('element').data() 应该给你所有的属性，我还注意到你没有在你的代码中导入 jquery，但是问题被标记为 JQuery，这是故意的吗？

标签： javascript jquery html5-canvas chart.js

【解决方案1】：

如果你想获得属性data-role，.getAttribute() 正在做这项工作。

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

CodePen

【讨论】：