我在 Google Visualization 中创建了一个表，它使用以下代码:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var cssClassNames = {
'headerRow': 'headerRow',
'tableRow': 'tableRow'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Username');
data.addColumn('number', 'Won');
data.addColumn('number', 'Lost');
data.addColumn('number', 'Win/Loss Ratio');
data.addColumn('number', 'Goals For');
data.addColumn('number', 'Goals Against');
data.addColumn('number', 'Score');
data.addRows([
['Mike', 22, 13, 0.63, 65, 30, 600],
['Andy', 25, 10, 0.71, 60, 18, 630],
['Steve', 5, 20, 0.20, 10, 50, 475],
['Chris', 40, 10, 0.80, 120, 20, 670],
['Jake', 15, 15, 0.50, 70, 50, 525],
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</html>
我希望能够使用 CSS 更改标题行和表格行的格式，但我不知道如何做到这一点。我已阅读Configuration Options但作为一个相对较新的编码新手，这并没有帮助，需要逐步清楚地解释。
具体来说，我应该在上面的代码中添加什么来告诉图表使用我的自定义 CSS。我会在我的 main 中放入什么？ CSS 样式表。不确定它是(对于 header )#headerRow { } 还是 .headerRow { }。
供您引用，如果有任何区别，这是通过 WordPress 通过自定义字段插入的。
如果我在问题中表达得不够清楚，请跟进。干杯。
更新: @asgallant - 更改为 headerCell 和 tableCell 时仍然无法工作。
我当前的代码是: HTML/Javascript:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var cssClassNames = {
headerCell: 'headerCell',
tableCell: 'tableCell'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Username',{style: 'background-color:red;'});
data.addColumn('number', 'Won');
data.addColumn('number', 'Lost');
data.addColumn('number', 'Win/Loss Ratio');
data.addColumn('number', 'Goals For');
data.addColumn('number', 'Goals Against');
data.addColumn('number', 'Score');
data.addRows([
['Mike', 22, 13, 0.63, 65, 30, 600],
['Andy', 25, 10, 0.71, 60, 18, 630],
['Steve', 5, 20, 0.20, 10, 50, 475],
['Chris', 40, 10, 0.80, 120, 20, 670],
['Jake', 15, 15, 0.50, 70, 50, 525],
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</html>
CSS:
#table_div table {
color: #000;
margin-top: 10px;
}
.headerRow {
color: #000;
}
table_div 允许我编辑整个表格，因此当前的 CSS 代码有效果，但是当我添加背景颜色时:#ff0000;例如，它没有效果。与 .headerRow 相同。背景取自https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css并且不想被覆盖。
知道为什么会这样吗？
如果绝对有必要，我很乐意完全禁用 Google CSS，并完全在我自己的 CSS 表中完成它。
最佳答案
创建 CSS 后，我发现这是使其正常工作的关键:
var cssClasses = {headerRow: 'tblHeaderClass',hoverTableRow: 'tblHighlightClass'};
var options = {showRowNumber: false, allowHTML: true, 'cssClassNames':cssClasses};
table.draw(data,options);强制指令 cssClassNames 带有“ticks”字符串，并确保使用您声明的对象来定义用于公开的表元素名称的 CSS 类。
关于css - 将 CSS 应用到 Google 可视化表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19080261/