谷歌圖表列篩選

Question

我試圖篩選谷歌路線圖列和使用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

您想要在for循環內保持columnstable.addRow調用，因爲它會填充用於提供列列表的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/。