如何在动态的谷歌图表表中居中数据答案

【问题标题】：how to center data in google charts table that is dynamically如何在动态的谷歌图表表中居中数据
【发布时间】：2013-03-14 23:20:58
【问题描述】：

我正在使用谷歌图表中的表格。表中的所有数据都右对齐。我需要在中心对齐文本。我正在动态构建表格，因此无法应用 set cell 方法：

 data.setCell(1, 1, 25000, '$25,000', {'className': 'bold-font center-text'});

我想应用类名而不应用 25000 和 $25000 值。类似的东西：
data.setCell(1, 1, '', '', {'className': 'bold-font center-text'});

我也不想将其仅应用于第一个单元格，而是应用于整个表格。

总之，如何让表格中的所有文本居中？

【问题讨论】：

您不能在动态创建所有数据后循环遍历所有数据以使用上面的代码设置属性吗？我认为您没有理由不能使用该方法应用它。

标签： charts google-visualization

【解决方案1】：

添加自定义 CSS

将此代码添加到您的页面

<style>
.google-visualization-table-td {
text-align: center !important;
}
</style>

"!important" 是覆盖 google 的数字/文本左/右对齐所必需的。

【讨论】：

【解决方案2】：

对于那些试图完成同样事情但使用 Angular 和 Ionic 的人来说，这只是一个替代答案。

我必须将这段 css 放入 *.scss 文件中，该文件与要呈现图表的 *.html 文件相关联：

::ng-deep td[class^='google-visualization-table'] {
    text-align: center !important;
    }

“类”后面的奇怪插入符号用于将样式仅应用于以字符串“google-visualization-table”开头的 td 元素。根据您的 td 包含的数据类型，类名可能只是“google-visualization-table-td”，也可能是“google-visualization-table-type-number google-visualization-table-td”等，因此需要像这样灵活的css语句。

另外，我听说 ng:deep 已被弃用，但这仍然有效（截至 2021 年底）。不过，将来换一种方式可能会很好。

【讨论】：