Javascript 设置Google图表表的样式

我正在尝试将CSS样式添加到Google图表表中。我试过这个：

在第一个手机上（迈克），但它不工作。我在options变量中将allowtml设置为true。如何更改单个单元格的背景、文本颜色等？多谢各位

<script type="text/javascript">
        google.load('visualization', '1', {packages:['table']});
        google.setOnLoadCallback(drawTable);
        function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Employee Name');
            data.addColumn('date', 'Start Date');
            data.addRows(3);
            data.setCell(0, 0, 'Mike', {style: 'background-color:red;'});
            data.setCell(0, 1, new Date(2008, 1, 28));
            data.setCell(1, 0, 'Bob');
            data.setCell(1, 1, new Date(2007, 5, 1));
            data.setCell(2, 0, 'Alice');
            data.setCell(2, 1, new Date(2006, 7, 16));

            var options = {
                allowHtml: true
            };

            // Create a formatter.
            // This example uses object literal notation to define the options.
            var formatter = new google.visualization.DateFormat({formatType: 'long'});

            // Reformat our data.
            formatter.format(data, 1);

            // Draw our data
            var table = new google.visualization.Table(document.getElementById('dateformat_div'));
            table.draw(data, options);
        }
    </script>

load（'visualization'，'1'，{packages:['table']}）；
setOnLoadCallback（drawTable）；
函数drawTable（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Employee Name'）；
data.addColumn（“日期”、“开始日期”）；
数据。添加行（3）；
setCell（0,0，'Mike'，{style:'backgroundcolor:red；'}）；
setCell（0,1，新日期（2008,1,28））；
setCell（1,0，'Bob'）；
setCell（1,1，新日期（2007,5,1））；
setCell（2,0，'Alice'）；
setCell（2,1，新日期（2006,7,16））；
变量选项={
allowHtml：是的
};
//创建格式化程序。
//本例使用对象文字符号来定义选项。
var formatter=new google.visualization.DateFormat（{formatType:'long'}）；
//重新格式化我们的数据。
格式化程序。格式化（数据，1）；
//绘制我们的数据
var table=新的google.visualization.table（document.getElementById（'dateformat_div'）；
表.绘制（数据、选项）；
}

如何更改单个单元格的背景、文本颜色等？多谢各位

<script type="text/javascript">
        google.load('visualization', '1', {packages:['table']});
        google.setOnLoadCallback(drawTable);
        function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Employee Name');
            data.addColumn('date', 'Start Date');
            data.addRows(3);
            data.setCell(0, 0, 'Mike', {style: 'background-color:red;'});
            data.setCell(0, 1, new Date(2008, 1, 28));
            data.setCell(1, 0, 'Bob');
            data.setCell(1, 1, new Date(2007, 5, 1));
            data.setCell(2, 0, 'Alice');
            data.setCell(2, 1, new Date(2006, 7, 16));

            var options = {
                allowHtml: true
            };

            // Create a formatter.
            // This example uses object literal notation to define the options.
            var formatter = new google.visualization.DateFormat({formatType: 'long'});

            // Reformat our data.
            formatter.format(data, 1);

            // Draw our data
            var table = new google.visualization.Table(document.getElementById('dateformat_div'));
            table.draw(data, options);
        }
    </script>

根据@Bondye的评论，答案可以在开发者指南中找到

定义符合条件的样式规则：

<style>
.orange-background {
   background-color: orange;
  }

 .orchid-background {
  background-color: orchid;
 }

.beige-background {
 background-color: beige;
  }
</style>

---

有关更现代的小部件和图表，您可以将自定义css应用于Google图表，请参阅此repo以了解已实现的样式

---

的自定义表格格式对我来说很棘手：

它的风格是：

.tableRow{背景色：rgb（246253253）；}

它还可以在标准css中使用：

tr:hover{background color:…；}

它有时只适用于

！重要提示

css键：

背景色：rgba（1411862380.76）！重要的

这是我的工作示例：

//加载可视化API和控件包。
load（'visualization'，'1.0'，{packages:['table']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawDashboard）；
//创建并填充数据表的回调，
//实例化仪表板、范围滑块和饼图，
//传入数据并绘制它。
函数drawDashboard（）{
//创建我们的数据表。
var data=google.visualization.arrayToDataTable([
['Sex'，'Name'，'Donuts eated'，'Html']，
['Male'，'Michael'，5'，'，
[‘雌性’、‘Elisa’、‘7’、]，
['Male'，'Robert'，3'，'，
[男性'，'约翰'，2，，]，
[‘女性’、‘杰西卡’、‘6’、]，
['Male'，'aron'，1'，'，
[‘女性’、‘玛格丽特’、‘8’、]，
]);
var table=new google.visualization.table（document.getElementById（'table'）；
变量选项=
{
allowHtml:是的，
showRowNumber:true，
宽度：“100%”，
身高：“100%”
,
cssClassNames:{
headerRow:“headerRow”，
tableRow:“tableRow”，
oddTableRow:“oddTableRow”，
selectedTableRow:“selectedTableRow”，
//hoverTableRow:“hoverTableRow”，
headerCell:“headerCell”，
tableCell:“tableCell”，
rowNumberCell:“rowNumberCell”
}    
};
表.绘制（数据、选项）；
}

正文
{
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
/*桌子*/
th{
填充顶部：12px；
垫底：12px；
文本对齐：左对齐；
背景色：rgb（83133180）；
边框颜色：rgb（151150168）！重要；
颜色：白色；
}
oddTableRow先生{
背景色：rgb（232、246、247）；
}
.tableRow{背景色：rgb（246253253）；}
tr:hover{背景色：rgba（233235 1540.76）！重要；}
.selectedTableRow{
背景色：rgba（1411862380.76）！重要；
}

谷歌图表。表中的自定义HTML和CSS

谷歌图表表不是SVG，而是HTML，因此您应该能够通过添加新的CSS样式来更改样式。您读过这篇文章吗@你找到这个问题的答案了吗？回答你自己的问题怎么样？Bondye的链接回答了这个问题。你能按回答的那样结束这个问题吗？只包含链接（特别是外部资源链接）的答案不被认为是很好的答案。链接腐烂的可能性意味着，如果该URL死亡（或更改），您的帖子将不包含任何有用的信息。请在您的帖子中添加相关的解决方案，并留下链接仅供参考。+1回答正确。对于那些感兴趣的人，可以在这里找到类可以应用到的对象的描述（参见表中的cssClassNames）：我从来没有这样说过。此链接显示了一个项目，作者在谷歌图表中实现了CSS，并将默认样式覆盖到新布局中。是的，表中有一个自定义的css，请查看并欣赏响应。