Как правильно настроить прослушиватель / обработчик событий для элемента управления CategoryFilter? - PullRequest
Новая
       5

Как правильно настроить прослушиватель / обработчик событий для элемента управления CategoryFilter?

1 голос
/ 08 января 2020

Я пытаюсь построить следующие образцы данных, используя LineChart с CategoryFilter для фильтрации по году.

Таблица данных определяется как:

aggData: [Date: date ] [Команда: строка] [Счет: число]

Из таблицы aggData я динамически вычисляю тики hAxis по умолчанию как 

    var hAxisTicks = [];
    var dateRange = aggData.getColumnRange(0);

    for (var date = dateRange.min; date <= dateRange.max; date = new Date(date.getFullYear(), date.getMonth() + 1)) {
        hAxisTicks.push(date);
    }

Выбор года и линейный график настроены так: 

var yearPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'categoryFilter_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                allowTyping: false,
                allowMultiple: false,
                label: 'Year:',
                labelStacking: 'vertical'
            },
            useFormattedValue: true
        }
    });

var lineChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
        width: 900,
        height: 500,
        hAxis: {
           format: 'MMM', ticks: hAxisTicks
        }
    }
});

Я добавил следующий слушатель событий 

google.visualization.events.addListener(yearPicker, 'statechange', function () {

    google.visualization.events.addOneTimeListener(lineChart, 'ready', getTicks);
});

Мне нужно создавать / воссоздавать тики hAxis каждый раз, когда yearPicker изменяется, вызывая getTicks

function getTicks() {
        var ticks = [];
        if (yearPicker.getState().selectedValues.length > 0) {
            for (var i = 0; i <= hAxisTicks.length; i = i + 1) {
                var date = new Date(hAxisTicks[i]);
                if (date.getFullYear() == yearPicker.getState().selectedValues[0]) {
                    ticks.push(date)
                }
            }
        }

        else {
            for (var i = 0; i <= hAxisTicks.length; i = i + 1) {
                var date = new Date(hAxisTicks[i]);
                ticks.push(date);
            }
            lineChart.setOption('hAxis.ticks', ticks);
            lineChart.draw();
        }
        lineChart.setOption('hAxis.ticks', ticks);
        lineChart.draw();
    }

Вот что происходит на разных этапах

1- При первой загрузке страницы график выглядит так (функция getTicks НЕ вызывается), что правильно: enter image description here

2- Например, при изменении года на 2019 тики hAxis пересчитываются (функция getTicks вызывается), и график кажется правильным enter image description here

3- Попытка go вернуться к графику по умолчанию для отображения Спустя все годы под CategoryFilter появляется сообщение об ошибке a.getTime is not a function enter image description here

4- Любая последующая попытка изменить CategoryFilter на любое значение приводит к `` `одному или нескольким участникам не удалось нарисовать () enter image description here

Как я могу исправить это поведение?

1 Ответ

1 голос
/ 08 января 2020

Я понял, что моя итерация по массиву hAxisTics была неверной. Я должен остановиться на < hAxisTics.length вместо <= hAxisTics.length, и я должен пересчитать в обработчике событий 

google.visualization.events.addListener(yearPicker, 'statechange', function () {
    var ticks = [];
    if (yearPicker.getState().selectedValues.length > 0) {
        for (var i = 0; i < hAxisTicks.length; i = i + 1) {
            var date = new Date(hAxisTicks[i]);
            if (date.getFullYear() == yearPicker.getState().selectedValues[0]) {
                ticks.push(date)
            }
        }
    }

    else {
        for (var i = 0; i < hAxisTicks.length; i = i + 1) {
            var date = new Date(hAxisTicks[i]);
            ticks.push(date);
        }
        lineChart.setOption('hAxis.ticks', ticks);
        lineChart.draw();
    }
    lineChart.setOption('hAxis.ticks', ticks);
    lineChart.draw();
});
...