Javascript 如何隐藏谷歌图表表格中的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8785894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to hide column in google charts table
提问by Alex
I've got a Google Charts Tablethat displays a couple of columns and rows. Say for instance we have 4 columns(A,B,C,D respectively). How would I be able to still load column C's values, but just hidethe column so that it's not getting displayed?
我有一个显示几列和几行的Google 图表表。比如说我们有 4 列（分别是 A、B、C、D）。我怎样才能仍然加载 C 列的值，但只是隐藏该列，使其不显示？
Thanks in advance!
提前致谢！
回答by Alex
Instead of drawing the DataTable, you have to create an in-between DataView object where you filter the original data. Something like this:
您必须创建一个中间 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);
The hideColumns method is maybe better instead of setColumns, choose yourself!
hideColumns 方法可能比 setColumns 更好，请自行选择！
Cheers
干杯
回答by broccoli2000
Here's an alternative using a ChartWrapper instead of a chart.
这是使用 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();
If you use a ChartWrapper, you can easily add a function to change the hidden columns, or show all the columns. To show all the columns, pass nullas the value of 'columns'. For instance, using jQuery,
如果您使用 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();
});
In your html,
在你的 html 中，
<button value="[0, 1, 3]" >Hide columns</button>
<button value="null">Expand All</button>
(Note: evalused for conciseness. Use what suits your code. It's beside the point.)
（注意： eval用于简洁。使用适合您的代码的内容。这是无关紧要的。）
回答by B.Nishan
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
回答by Jason Allshorn
You can do this with CSS.
你可以用 CSS 做到这一点。
"#table_div" is the div my table is wrapped in. I use this because there a multiple tables on the same page.
“#table_div”是我的表所包含的 div。我使用它是因为同一页面上有多个表。
#table_div .google-visualization-table table.google-visualization-table-table
td:nth-child(1),th:nth-child(1){
display:none;
}
I also have an event handler on the chart's rows, and can still pick up the data from the hidden column.
我在图表的行上也有一个事件处理程序，并且仍然可以从隐藏列中获取数据。
回答by Mohit Satish Pawar
If you want to use particular column value in control wrapper but don't want to show that column in Google Charts then do following things.
如果您想在控件包装器中使用特定的列值但不想在 Google 图表中显示该列，请执行以下操作。
1) Add all column to your google charts data table.
2) Add following things to optionsof your chartWrapper.
1）将所有列添加到您的谷歌图表数据表。
2) 将以下内容添加到您的 chartWrapper选项中。
// Set chart options
optionsUser = {
"series": {
0: {
color: "white",
visibleInLegend: false
}
}
};
3) In above code series, 0 means the first line in your line chart. So It will set the color to white and also hide column name in Legends.
3) 在上面的代码系列中，0 表示折线图中的第一行。所以它会将颜色设置为白色并隐藏图例中的列名。
4) This way is not the proper way to hide columns, Using DataView is recommended. Whenever you want to use data in the data table for adding controls to your chart but don't want to show that column in the chart this is the way.
4）这种方式不是隐藏列的正确方法，建议使用DataView。每当您想使用数据表中的数据向图表添加控件但又不想在图表中显示该列时，这就是方法。
