google-visualization - 你可以调整谷歌图表中的列宽吗？

Question

所以我有一个显示行的索引号的表。我已将表格的宽度最大化，使其与页面完全相同。不幸的是，带有索引号的列现在很烦人，所以我想知道是否有一种方法可以设置第一列的宽度上限或使表中的所有列都可以调整？谢谢！

Answer 1

在 Google Visualization API Tables 中设置列​​宽真的很烦人。HTML 表格根据表格中的第一行数据设置列宽，对于 Google 可视化 API 来说，这就是标题行（正常的表格构造会将标题行放入标签<thead>中<th>，但 Google 将其<tbody>放入<td>标签，这就是它定义列宽的原因）。API 没有提供任何方法来将 css 或类分配给标题行中的各个单元格，因此您必须编写 javascript 来解析您的表格并设置适当的类/CSS 来处理您的列宽。此外，由于每当用户单击列标题对表格进行排序或单击页面按钮（如果启用了分页）时，表格就会从 HTML 中删除并重新绘制，因此您必须在表格出现时为单元格重新分配类/CSS重绘。更复杂的是，如果您为表格分配了一个高度，以便表格在太大时滚动，API 实际上会绘制两个表格以创建固定的标题效果。

通常我是使用 Google Visualization API 的拥护者，但在 Table 可视化的情况下，有时麻烦多于其价值。您可能会更轻松地使用另一个库，或者创建自己的自定义表格可视化。

如果您想继续使用表格可视化，这里有一些代码可以帮助您入门：

google.visualization.events.addListener(table, 'ready', function () {
    var headerCells = document.querySelectorAll('#myTableDiv table tr:first-child td');
    for (var i = 0; i < headerCells.length; i++) {
        // access the header cell element with headerCells.item(i)
    }
});