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

我正在尝试使用带有CategoryFilter的折线图绘制以下示例数据，以便根据年份进行过滤

数据表定义为：

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

从

aggData

表I中，动态计算默认的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);
    }

我添加了以下事件侦听器

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

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

每当

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

函数getTicks（）{ var=[]； 如果（yearPicker.getState（）.selectedValues.length>0）{

---

对于（var i=0；i我意识到我对hAxisTics数组的迭代是不正确的。我应该停在

而不是

0）{
对于（变量i=0；i

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

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