javascript - 我正在尝试使用javascript向Chart.js中条形图的每一列添加点击事件
问题描述
我一直在尝试使用 Chart.js 向条形图中的每一列添加点击事件。我想弄清楚的是如何让每列上的点击事件执行我想要的代码。
这样做的目标是当用户点击图表的特定栏时,它会执行一个 php 表单提交,将他们带到网站上的另一个页面。
当用户进入页面时,条形图数据通过 php 从 SQL 数据库中填充。
这是我到目前为止的代码示例...
<canvas id="briskChart" style="margin:auto;display:block;background-color:white;border-style:solid;border-width:1px;padding:10px;"></canvas>
<script>
var red = <?=json_encode($count1[0]);?>;
var yellow = <?=json_encode($count2[0]);?>;
var green = <?=json_encode($count3[0]);?>;
var blue = <?=json_encode($count4[0]);?>;
var grey = <?=json_encode($count5[0]);?>;
var dept = <?=json_encode($row['dept']);?>;
var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
datasets: [{
data: [red, yellow, green, blue, grey],
backgroundColor: [
'rgba(255, 0, 0, 0.4)',
'rgba(255, 216, 0, 0.4)',
'rgba(0, 255, 0, 0.4)',
'rgba(0, 0, 255, 0.4)',
'rgba(160, 160, 160, 0.4)'
],
borderColor: [
'rgba(255, 0, 0, 1)',
'rgba(255, 216, 0, 1)',
'rgba(0, 255, 0, 1)',
'rgba(0, 0, 255, 1)',
'rgba(160, 160, 160, 1)'
],
borderWidth: 1
}]
},
options: {
onClick: event => {
document.bred.submit();
},
title: {
display: true,
fontSize: 24,
text: dept + ' Dept Risk Summary',
fontColor: '#000000'
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: true,
gridLines: {color: '#000000'},
ticks: {
fontColor: "black",
fontSize: 16
}
}],
yAxes: [{
display: true,
gridLines: {color: '#000000'},
ticks: {
beginAtZero: true,
fontColor: "black",
fontSize: 16,
stepSize: 1
}
}],
}
}
});
</script>
这是html:
<form action='../php/bred.php' method='POST' name='bred'>
</form>
Chart.js 的文档在点击事件方面非常有限。对于每个数据系列,当单击该列时,我想运行相应document.[form name].submit
的操作以将用户带到该新页面。
如果有人有任何使用 Chart.js 的经验并且可以为我指明正确的方向,我将永远感激不尽。
解决方案
您可以创建一个从图表click
中检索x
和值的处理程序。y
然后,使用该数据,您可以向您的 PHP 脚本发送一个GET
或POST
请求。
从条形图中获取值的示例(这里的关键是看onClick
函数):
var red, yellow, green, blue, grey, dept = "";
var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundColor: [
'rgba(255, 0, 0, 0.4)',
'rgba(255, 216, 0, 0.4)',
'rgba(0, 255, 0, 0.4)',
'rgba(0, 0, 255, 0.4)',
'rgba(160, 160, 160, 0.4)'
],
borderColor: [
'rgba(255, 0, 0, 1)',
'rgba(255, 216, 0, 1)',
'rgba(0, 255, 0, 1)',
'rgba(0, 0, 255, 1)',
'rgba(160, 160, 160, 1)'
],
borderWidth: 1
}]
},
options: {
onClick: function(c, i) {
element = i[0]; // the chart element you clicked on
var xValue = this.data.labels[element._index]; // the x-value of the bar
var yValue = this.data.datasets[0].data[element._index]; // the y-value of the bar
console.log(xValue);
console.log(yValue);
// then, here, you could send a GET/POST request to your PHP function
},
title: {
display: true,
fontSize: 24,
text: dept + ' Dept Risk Summary',
fontColor: '#000000'
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: '#000000'
},
ticks: {
fontColor: "black",
fontSize: 16
}
}],
yAxes: [{
display: true,
gridLines: {
color: '#000000'
},
ticks: {
beginAtZero: true,
fontColor: "black",
fontSize: 16,
stepSize: 1
}
}],
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="briskChart">
</canvas>
推荐阅读
- git - 我可以将对 fork 的提交合并回原始项目吗?
- javascript - 来自 javascript.info 网站的关于 Javascript 装饰器示例代码的问题
- java - 编写代码以从 URL 下载内容后,我在 Log 中没有得到任何输出
- mysql - 如何在 PHP/MySQL 中通过外键获取所有值?
- php - Magento 模块问题
- python - PySpark RDD过滤器错误从字符串到整数
- javascript - 表行数据未在 Javascript 中更新和删除
- jquery - 存储弹出窗口被点击的次数
- c++ - 将向量写入输出文件c ++
- python - 如何在 DJANGO 的函数中以同一视图保存和显示数据