如何在谷歌圖表表中隱藏列

我有一個Google Charts Table，它顯示了一些列和行。比如說我們有4列（分別是A，B，C，D）。我如何能夠仍然加載列C的值，但只是隱藏列，以便它不被顯示？如何在谷歌圖表表中隱藏列

在此先感謝！

2012-01-09 Tiwaz89

而不是繪製DataTable，您必須創建一個介於原始數據過濾的中間DataView對象。就像這樣：

//dataResponse is your Datatable with A,B,C,D columns   
var view = new google.visualization.DataView(dataResponse); 
view.setColumns([0,1,3]); //here you set the columns you want to display 

//Visualization Go draw! 
visualizationPlot.draw(view, options);

hideColumns方法可能更好，而不是setColumns，選擇你自己！

乾杯

來源

2012-02-16 15:33:14 Alex

有人有這種行爲發生，當有人點擊一個鏈接？例如，默認情況下，我想隱藏一些列（使用view.hideColumns）。然後我希望在表格上方有一個「展開」鏈接，當用戶點擊它時，其餘列將被公開（使用view.setColumns）。我也樂於提供更好的實現這種行爲的建議。 – Myx 2012-07-30 23:51:10

你可以用CSS做到這一點。

「#table_div」是我的表所包裹的div。我使用這個，因爲在同一頁面上有多個表。

#table_div .google-visualization-table table.google-visualization-table-table 
    td:nth-child(1),th:nth-child(1){ 
    display:none; 
}

我在圖表的行上也有一個事件處理程序，並且仍然可以從隱藏列中獲取數據。

來源

2016-02-14 05:00:31

下面是使用ChartWrapper而不是圖表的替代方法。

var opts = { 
    "containerId": "chart_div", 
    "dataTable": datatable, 
    "chartType": "Table", 
    "options": {"title": "Now you see the columns, now you don't!"} 
} 
var chartwrapper = new google.visualization.ChartWrapper(opts); 

// set the columns to show 
chartwrapper.setView({'columns': [0, 1, 4, 5]});  
chartwrapper.draw();

如果您使用ChartWrapper，您可以輕鬆添加一個函數來更改隱藏列或顯示所有列。要顯示所有列，請通過null作爲值'columns'。例如，使用jQuery，

$('button').click(function() { 
    // use your preferred method to get an array of column indexes or null 
    var columns = eval($(this).val()); 

    chartwrapper.setView({'columns': columns});  
    chartwrapper.draw(); 
});

在你的HTML，

<button value="[0, 1, 3]" >Hide columns</button> 
<button value="null">Expand All</button>

（注：eval用於簡明使用什麼適合你的代碼這是題外話。）

來源

2016-11-04 02:40:16 broccoli2000

如果您想要在控制包裝中使用特定的列值，但不想在Google圖表中顯示該列，然後執行以下操作。

1）將所有列添加到您的谷歌圖表數據表。
2）將以下內容添加到您的chartWrapper的選項。

// Set chart options 
    optionsUser = { 
     "series": { 
      0: { 
       color: "white", 
       visibleInLegend: false 
      } 
     } 
    };

3）在上面的代碼系列中，0表示折線圖中的第一行。所以它會將顏色設置爲白色，並在傳奇中隱藏列名。

4）這種方式不是隱藏列的正確方法，建議使用DataView。無論何時您想要使用數據表中的數據將控件添加到圖表中，但不想在圖表中顯示該列，這就是方法。

來源

2018-01-28 16:06:48

如何在谷歌圖表表中隱藏列

回答

相關問題