javascript - 使用 Chart.js 的 onClick 函数,您可以从未定义或空结果执行代码吗?
问题描述
我试图通过单击返回未定义元素的 Chart.js 区域来执行函数。基本上当用户单击图表数据列以外的任何位置时。
研究 Javascript MDN 这看起来可行,但我无法执行该函数。
console.log(xValue)
各州"TypeError: element is undefined"
。_
这是我正在尝试的代码
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
同样。
解决方案
问题是由此引起的:
element = i[0];
var xValue = this.data.labels[element._index];
var yValue = this.data.datasets[0].data[element._index];
在 bar 元素外部单击时,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];
推荐阅读
- jenkins - Jenkins如何使用Gcloud命令在远程主机上使用ssh执行shell脚本
- mongodb - Mongo Query根据相同的字段值和未过期的文件获取文档
- webpack - 当我使用 mini-css-extract-plugin 我得到 [webpack-cli] Invalid configuration object 错误
- node.js - 如何使用 nextJs 显示自定义 410 页面
- css - 如何去除 CUBA 平台中特定元素的阴影?
- usb - 通过自定义 c++ 应用程序从 uClinux 2.6.17 接口/访问基于 STM32 的板
- .htaccess - 除了以文件扩展名结尾的 URL(即 .pdf、.html、...)之外,有没有办法自动向所有 URL 添加尾部斜杠?
- javascript - 如何从承诺中获得结果
- pandas - pyspark中不同版本的熊猫
- discord - Discord bot“TypeError:无法读取未定义的属性‘执行’”错误