0

我正在尝试过滤 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 列。

我该如何设置它，以便它最初显示单个选定列的数据，但仍然能够从选择器中选择其他列？

4

1 回答 1

0

您希望将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/。

于 2013-08-29T03:44:02.550 回答