javascript - 如何在标签(数据集)上触发点击事件并传递其值?
问题描述
我正在尝试触发单击数据集的标签(“其他”、“次要”)或值(因此稍后连接到特定的 URL),但当时我唯一可以检索的是index
and datasetIndex
。
我正在尝试使用与此答案中描述的相同的原则
这是我的代码:
var ctx = $('#open_chart');
var chart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [1, 5],
backgroundColor: ['red', 'blue'],
weight: 1
}],
labels: ['Minor', 'Other']
},
options: {
responsive: true,
title: {
display: true,
text: 'Title',
position: 'bottom',
fontSize: 15,
fontColor: '#000000'
},
legend: {
display: false
},
onHover: function(event, chartElement) {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
},
onClick: function(e) {
// var pie = this.getElementAtEvent(e)[0];
var pieNotCorrect = this.getElementAtEvent(e);
var pie = this.getElementAtEvent(e)[0];
console.log(pie)
console.log(pieNotCorrect)
var index = pie._index;
var datasetIndex = pie._datasetIndex;
// check which part is clicked
if (index == 0 && datasetIndex == 0) alert('First BAR Clicked!');
}
}
});
var newDataset = {
data: [1, 3, 5],
backgroundColor: ['red', 'blue', 'yellow'],
label: 'SubStatuses',
labels: ['Red', 'Blue', 'Yellow'],
weight: 4
};
chart.data.datasets.push(newDataset);
chart.update();
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chart-container" style="position: relative; height:500px; width:300px">
<canvas id="open_chart" style="position:absolute;top:150px;" width="200" height="200"></canvas>
</div>
解决方案
尝试这个
从您的代码中删除以下代码:
var pieNotCorrect = this.getElementAtEvent(e);
var pie = this.getElementAtEvent(e)[0];
console.log(pie)
console.log(pieNotCorrect)
var index = pie._index;
var datasetIndex = pie._datasetIndex;
并且仅在以下使用:
var pie = this.getElementAtEvent(e)[0];
否则你的代码工作正常
var ctx = $('#open_chart');
var chart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [1, 5],
backgroundColor: ['red', 'blue'],
weight: 1
}],
labels: ['Minor', 'Other']
},
options: {
responsive: true,
title: {
display: true,
text: 'Title',
position: 'bottom',
fontSize: 15,
fontColor: '#000000'
},
legend: {
display: false
},
onHover: function(event, chartElement) {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
},
onClick: function(e) {
var activePoints = this.getElementsAtEvent(e);
var selectedIndex = activePoints[0]._index;
alert("Label : " + this.data.labels[selectedIndex] + " Value : " + this.data.datasets[0].data[selectedIndex]);
}
}
});
var newDataset = {
data: [1, 3, 5],
backgroundColor: ['red', 'blue', 'yellow'],
label: 'SubStatuses',
labels: ['Red', 'Blue', 'Yellow'],
weight: 4
};
chart.data.datasets.push(newDataset);
chart.update();
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chart-container" style="position: relative; height:500px; width:300px">
<canvas id="open_chart" style="position:absolute;top:150px;" width="200" height="200"></canvas>
</div>
推荐阅读
- hadoop - Hadoop FS:文件及其直接父目录的修改时间差异是否正常?
- alpine.js - 识别 alpine.js for 循环中的最后一项
- java - 为什么这些 application.properties 不起作用?
- python - 将点云数据 (.ply) 转换为范围图像
- javascript - Webflow 上类似 Typeform 的表单,使用 Enter 键导航和提交
- python - 将二进制编码的字符串转换回二进制
- c# - 当组织的用户启用了 SSO 时,您可以为 SOBO 使用 API 帐户和旧式身份验证吗?
- julia - Julia Plots 中的多个轴(GR 后端)
- python - NameError:名称“con_db”未定义
- jinja2 - 在 dbt 模型中使用 if 块