如何获取使用chartjs创建的canvas图表的数据属性
Posted
技术标签:
【中文标题】如何获取使用chartjs创建的canvas图表的数据属性【英文标题】：How to get the data attribute of the canvas chart created using chartjs 【发布时间】：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" 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，这是故意的吗？ 【参考方案1】：如果你想获得属性data-role，.getAttribute() 正在做这项工作。
console.log(this.getAttribute("data-role"));
CodePen
【讨论】：
以上是关于如何获取使用chartjs创建的canvas图表的数据属性的主要内容，如果未能解决你的问题，请参考以下文章
使用 nodejs 和 chartjs 从 mongodb 插入和获取值