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

Question

我正在尝试通过单击 Chart.js 未定义元素的 returns 区域来执行功能。基本上当用户点击图表数据列以外的任何地方时。

研究 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

还有。

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 设置为 'fail'（错误是显示在控制台中）。

因此，代码应该更早地测试 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];

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

Using Chart.js onClick function, can you execute code from an undefined or null result?

javascript

null

undefined

chart.js