时间戳

首页 > 解决方案 > 如何为 CategoryFilter 控件正确配置事件侦听器/处理程序？

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

问题描述

我正在尝试使用带有 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每次更改时，我都需要通过调用来创建/重新创建 hAxis 刻度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函数未被调用）这是正确的： 在此处输入图像描述

2- 例如，当年份更改为 2019 年时，hAxis 刻度会重新计算（getTicks确实会调用该函数）并且图表看起来是正确的 在此处输入图像描述

3- 尝试返回默认图表显示所有年份，a.getTime is not a functionCategoryFilter 下出现错误消息 在此处输入图像描述

4- 任何后续将 CategoryFilter 更改为任何值的尝试都会抛出一个 ```一个或多个参与者无法绘制（） 在此处输入图像描述

我该如何纠正这种行为？

标签： chartsgoogle-visualization

解决方案

我意识到我对 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();
});

推荐阅读