如何为CategoryFilter控件正确配置事件侦听器/处理程序？

Question

我正在尝试使用带有CategoryFilter的LineChart绘制以下示例数据，以按年份进行过滤。

数据表定义为：

aggData：[日期：日期] [团队：字符串] [得分：数字]

从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);
});

每次调用yearPicker时getTicks发生变化，我都需要创建/重新创建hAxis刻度线>

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函数）：

2-例如，当年份更改为2019时，将重新计算hAxis刻度（调用getTicks函数），并且该图看起来正确

3-尝试返回到默认图表以显示所有年份，在CategoryFilter下显示a.getTime is not a function错误消息

4-任何随后将CategoryFilter更改为任何值的尝试都将引发```一个或多个参与者未能draw（）

我该如何纠正这种行为？

我正在尝试使用带有CategoryFilter的LineChart绘制以下示例数据，以按年份进行过滤。数据表定义为：aggData：[日期：日期] [团队：字符串] [分数：数字]来自...

Answer 1

我意识到我在hAxisTics数组上的迭代不正确。我应该停在< hAxisTics.length而不是<= hAxisTics.length，并且应该在事件处理程序中重新计算