我正在尝试使用 javascript 向图表中条形图的每一列添加一个点击事件.js

Question

我一直在尝试使用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的经验，并能为我指明正确的方向，我将永远感激。

Answer 1

您可以创建一个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>