Chart.js onClickの機能を使用すると、未定義またはnull結果からコードを実行することができますか？

airider74：

私は要素が定義されていない返す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

同様に。

timclutton：

問題は、このによって引き起こされます。

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