Question

我有一个显示几列和多行的Google Charts Table。比如说我们有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

你可以用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 3

这是使用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用于简洁。使用适合您代码的内容。它不是重点。）

Answer 4

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 5

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

1）将所有列添加到您的Google图表数据表中 2）将以下内容添加到chartWrapper的选项。

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

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

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

如何在谷歌图表表中隐藏列

5 个答案: