使用chartjs onClick函数，您可以从未定义或空结果中执行代码吗？

Question

我正在尝试通过单击返回未定义元素的chartjs区域来执行函数。基本上，当用户单击图表数据列以外的任何位置时。

研究Javascript MDN，这似乎可行，但我无法执行该功能。

console.log（xValue）指出“ TypeError：元素未定义”。

这是我正在尝试的代码

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];