Question

随着时间的推移，我有一大堆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);
        }
    }
});

Answer 1

如果行可以“未定义”，那么您需要检查：

if (!sel[0].row)

..或

if (sel[0].row == 0)

..而不是

if (sel[0].row === null)

..因为每种情况下结果都不同。

请参阅http://jsfiddle.net/3wcd3w7x/2/

编辑：用于修复jsfiddle示例。

Answer 2

你几乎拥有它;您需要更改图表的series选项并设置图表的view参数，而不是创建DataView。替换这些行：

var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view);

用这些：

chart.setOption('series', series);
chart.setView({columns: columns});
chart.draw();

Google Charts：将ChartRangeFilter与数据系列选择器结合使用

2 个答案: