Question

我正在尝试过滤Google折线图列并使用Google Charts-Code for Category Filter

中共享的代码

这一切都很好但是我有很多列，并且希望图表只显示一列，并允许用户根据需要添加任何其他列。

我发现如果我使用initState变量将其设置为我想要最初显示的一列，它将在选择器部分显示该列，但仍然会显示所有列，直到我选择隐藏其余部分时的附加列，只显示我选择的两个。

然后我尝试关闭这部分代码：

// put the columns into this data table (skip column 0)<br>
for (var i = 1; i < data.getNumberOfColumns(); i++) {
 columnsTable.addRow([i, data.getColumnLabel(i)]);
 initState.selectedValues.push(data.getColumnLabel(i));
}

并将其替换为

columnsTable.addRow([1, data.getColumnLabel(16)]);
initState.selectedValues.push(data.getColumnLabel(16));

将我之后的列（第16列）设置为选择列表中的选定列，但从可用列列表中删除其他列，仍然显示所有16列。

如何进行设置以使其最初显示单个选定列的数据，但仍然可以从选择器中选择其他列？

Answer 1

您希望将columnstable.addRow调用保留在for循环内，因为它会填充用于提供列列表的DataTable。您可以设置selectedValue变量：

// put the columns into this data table (skip column 0)<br>
for (var i = 1; i < data.getNumberOfColumns(); i++) {
    columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(16));

为了使图表在初始选择时正确绘制，我们需要对结构进行一些小调整，将所有更新代码放入其自己的函数中，然后根据需要调用它：

function setChartView () {
    var state = columnFilter.getState();
    var row;
    var view = {
        columns: [0]
    };
    for (var i = 0; i < state.selectedValues.length; i++) {
        row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
        view.columns.push(columnsTable.getValue(row, 0));
    }
    // sort the indices into their original order
    view.columns.sort(function (a, b) {
        return (a - b);
    });
    chart.setView(view);
    chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

setChartView();

以下是一个有效的例子：http://jsfiddle.net/asgallant/WaUu2/157/。

谷歌图表列过滤

1 个答案: