使用Chart.js onClick函数，可以从未定义或null结果执行代码吗

Question

我试图通过点击Chart.js区域来执行一个函数，该区域返回一个未定义的元素。基本上，当用户单击图表数据列以外的任何位置时。

研究Javascript MDN，这看起来是可能的，但我无法执行该函数。

CCD_ 1表示CCD_。

这是我正在尝试的代码

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: function(c, i) {
element = i[0];
var xValue = this.data.labels[element._index]; 
var yValue = this.data.datasets[0].data[element._index];
console.log(xValue);
console.log(yValue);
if(xValue == 'Red'){document.bred.submit();}
if(xValue == 'Yellow'){document.byellow.submit();}
if(xValue == 'Green'){document.bgreen.submit();}
if(xValue == 'Blue'){document.bwatch.submit();}
if(xValue == 'Grey'){document.bretired.submit();}
if(xValue === undefined){document.ball.submit();} //want to run a form post here as well
},
title: {
display: true,
fontSize: 24,
text: dept + ' Dept Risk Summary',
fontColor: '#000000'
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: true,
gridLines: {color: '#000000'},
//                      scaleLabel: {
//                      display: true,
//                      labelString: '',
//                      fontColor: '#000000',
//                      fontSize:10
//                          },
ticks: {
fontColor: "black",
fontSize: 16
}
}],
yAxes: [{
display: true,
gridLines: {color: '#000000'},
//                      scaleLabel: {
//                      display: true,
//                      labelString: '',
//                      fontColor: '#000000',
//                      fontSize:10
//                          },
ticks: {
beginAtZero: true,
fontColor: "black",
fontSize: 16,
stepSize: 1
}
}],
}
}
});

我试过：

xValue === null
!xValue
typeof xValue === undefined

同样。

Answer 1

问题是由以下原因引起的：

element = i[0];
var xValue = this.data.labels[element._index]; 
var yValue = this.data.datasets[0].data[element._index];

在条形元素外部单击时，i[0]等于undefined，这会导致xValue和yValue的设置"失败"(控制台中显示错误(。

因此，代码应该更早地测试undefined，并且应该测试element，而不是xValue:

element = i[0];
if (element === undefined) {
document.ball.submit();
return;
}
var xValue = this.data.labels[element._index]; 
var yValue = this.data.datasets[0].data[element._index];