1
我已经创建了谷歌可视化一表，使用下面的代码：应用CSS到谷歌可视化表
<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。我会把我的主要内容放在什么位置？ CSS样式表。不知道是否（为标题）#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表单中删除它。
如果有人愿意讨论这个请访问：http://www.enginehere.com/stream/291/applying-css-to-google-visualization-table/ 将张贴在这里经过了答案。 – PauloCot
使用DOM检查器（如Chrome或Firefox的），您可能会看到这些类正在适当地应用于行。如果您没有看到CSS效果，那么标题单元格和表格单元格的默认CSS类别可能会覆盖您的行CSS，因此您应该将CSS类别也分配给“headerCell”和“tableCell”。 – asgallant
是的，这正是发生了什么事情。我创建的CSS效果在那里，但被超越（通过CSS代码行）。例如，当我输入背景颜色：＃000;在表头部分中，它没有任何作用，并且被默认的Google CSS覆盖，这是一些复杂的渐变背景，每个浏览器都有一个部分！你如何将CSS类分配给headerCell和tableCell？ – PauloCot