我一直在嘗試使用 Chart.js 向條形圖中的每一列添加點擊事件。我想弄清楚的是如何讓每列上的點擊事件執(zhí)行我想要的代碼。這樣做的目標是當(dāng)用戶點擊圖表的特定欄時，它會執(zhí)行一個 php 表單提交，將他們帶到網(wǎng)站上的另一個頁面。當(dāng)用戶進入頁面時，條形圖數(shù)據(jù)通過 php 從 SQL 數(shù)據(jù)庫中填充。這是我到目前為止的代碼示例...<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, },這是html：<form action='../php/bred.php' method='POST' name='bred'></form>Chart.js 的文檔在點擊事件方面非常有限。對于每個數(shù)據(jù)系列，當(dāng)單擊該列時，我想運行相應(yīng)document.[form name].submit的操作以將用戶帶到該新頁面。如果有人有任何使用 Chart.js 的經(jīng)驗并且可以為我指明正確的方向，我將永遠感激不盡。
1 回答
鳳凰求蠱
TA貢獻1825條經(jīng)驗 獲得超4個贊
您可以創(chuàng)建一個從圖表click中檢索x和值的處理程序。y然后，使用該數(shù)據(jù)，您可以向您的 PHP 腳本發(fā)送一個GET或POST請求。
從條形圖中獲取值的示例（這里的關(guān)鍵是看onClick函數(shù)）：
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>
- 1 回答
- 0 關(guān)注
- 134 瀏覽
添加回答
舉報
0/150
提交
取消