Используя функцию Chart. js onClick, можете ли вы выполнить код с неопределенным или нулевым результатом? - PullRequest
Новая
       26

Используя функцию Chart. js onClick, можете ли вы выполнить код с неопределенным или нулевым результатом?

1 голос
/ 06 марта 2020

Я пытаюсь выполнить функцию, нажав на диаграмму. 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

Также.

1 Ответ

1 голос
/ 06 марта 2020

Проблема вызвана этим: 

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