如何隐藏谷歌图表中的列

Question

我有一个 Google 图表表格，其中显示几列和几行。举例来说，我们有 4 列（分别为 A、B、C、D）。我怎样才能仍然加载 C 列的值，但只是隐藏该列以使其不显示？

提前致谢！

Answer 1

您必须创建一个中间的 DataView 对象，在其中过滤原始数据，而不是绘制 DataTable。像这样的事情：

//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 更好，您自己选择！

干杯

Answer 2

这是使用 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' 的值传递。例如，

$('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>

使用 jQuery （注意：使用 eval 是为了简洁。使用适合您的代码的内容。这不是重点。）

Answer 3

var view = new google.visualization.DataView(dataTable); //datatable contains col and rows
view.setColumns([0,1,3,4]); //only show these column
chart.draw(view, options); //pass the view to draw chat

Answer 4

您可以使用 CSS 来做到这一点。

“#table_div”是我的表格所在的 div。我使用它是因为同一页面上有多个表格。

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

我还在图表的行上有一个事件处理程序，并且仍然可以从隐藏列中获取数据。

Answer 5

如果您想在控件包装器中使用特定的列值，但不想在 Google 图表中显示该列，请执行以下操作。

1) 将所有列添加到您的谷歌图表数据表中。
2）将以下内容添加到图表包装器的选项中。

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

3) 在上面的代码系列中，0 表示折线图中的第一行。因此它将颜色设置为白色并隐藏图例中的列名称。

4）这种方式不是隐藏列的正确方式，建议使用DataView。每当您想要使用数据表中的数据向图表添加控件但又不想在图表中显示该列时，就是这样。