谷歌图表:将ChartRangeFilter与数据系列选择器相结合

随着时间的推移，我有一大组8个系列的数据，目前我有两个工作图，一个有一个范围选择器（允许您滑动一个条形图来选择要显示的日期），另一个可以单击图表图例来选择显示哪个系列和隐藏哪个系列。

不过，我还没能将它们组合成一个统一的仪表板，将两者结合在一起。这个特殊的代码允许您过滤日期，但隐藏/显示序列是不起作用的。我尝试了各种组合来代替最后一行（chart.draw（view）；）例如重新绘制仪表板和重新绑定仪表板，但仍然无法使其工作。如有任何建议，我们将不胜感激。以下是相关代码（编辑以包含示例json_obj）：

    var json_obj = {
            "cols": [{ "label": "Date", "type": "date" },
            { "label": "F1", "type": "number" },
            { "label": "F2", "type": "number" },
            { "label": "F3", "type": "number" },
            { "label": "F4", "type": "number" }],
            "rows": [{
                    "c": [{ "v": Date(6,1,14) },
                        { "v": .25 },
                        { "v": .55 },
                        { "v": .12 },
                        { "v": .067 }
                    ]
                },
                {
                    "c": [{ "v": Date(6,2,14) },
                        { "v": .27 },
                        { "v": .52 },
                        { "v": .18 },
                        { "v": .055 }
                    ]
                },
                {
                    "c": [{ "v": Date(6,3,14) },
                        { "v": .30 },
                        { "v": .60 },
                        { "v": .17 },
                        { "v": .043 }
                    ]
                },
                {
                    "c": [{ "v": Date(6,4,14) },
                        { "v": .33 },
                        { "v": .57 },
                        { "v": .14 },
                        { "v": .05 }
                    ]
                }]
        };
var data = new google.visualization.DataTable(json_obj);
var formatter = new google.visualization.NumberFormat({
    pattern: '#.###%'
});
for (i = 1; i <= 4; i++) {
    formatter.format(data, i);
}
var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard'));
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns() ; i++) {
    columns.push(i);
    if (i > 0) {
        series[i - 1] = {};
    }
}
var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
        // Filter by the date axis.
        filterColumnIndex: 0,
        ui: {
            chartType: 'LineChart',
            chartOptions: {
                hAxis: {
                    baselineColor: 'none',
                    format: 'MM/dd/yy'
                }
            },
            // 1 day in milliseconds = 24 * 60 * 60 * 1 * 1000 = 86400000
            minRangeSize: 86400000
        }
    }
});
var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart',
    options: {
        title: 'Feature Users Over Time',
        vAxis: {
            title: "Percent of Users",
            format: '#.###%',
            viewWindow: { min: 0 }
        },
            lineWidth: 2,
            curveType: 'function',
            series: series
    }
});
dashboard.bind(control, chart);
dashboard.draw(data);
google.visualization.events.addListener(chart, 'select', function () {
    var sel = chart.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
        // if row is undefined, we clicked on the legend
        if (sel[0].row === null) {
            var col = sel[0].column;
            if (columns[col] == col) {
                // hide the data series
                columns[col] = {
                    label: data.getColumnLabel(col),
                    type: data.getColumnType(col),
                    calc: function () {
                        return null;
                    }
                };
                // grey out the legend entry
                series[col - 1].color = '#CCCCCC';
            }
            else {
                // show the data series
                columns[col] = col;
                series[col - 1].color = null;
            }
            var view = new google.visualization.DataView(data);
            view.setColumns(columns);
            chart.draw(view);
        }
    }
});