Javascript 如何在google图表表中隐藏列

我有一个显示了几列和几行的。例如，我们有4列（分别是A、B、C、D）。我怎样才能仍然加载C列的值，而只是隐藏该列，使其不显示

---

提前谢谢

您必须创建一个中间数据视图对象来过滤原始数据，而不是绘制数据表。大概是这样的：

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

---

干杯

您可以使用CSS来实现这一点

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

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

---

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

这里有一种替代方法，使用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

用于简洁。使用适合您的代码。这不重要。）

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

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

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

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

---

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

当有人点击一个链接时，有没有办法让这种行为发生？例如，默认情况下，我想隐藏一些列（使用view.hideColumns）。然后，我希望在表上方有一个“Expand”链接，当用户单击它时，其余的列将被显示（使用view.setColumns）。我也愿意接受更好地实现这种行为的建议。

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