将CSS应用于Google可视化表 [英] Applying CSS to Google Visualization Table
问题描述
我在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] b ['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，我不知道如何做到这一点。我阅读了配置选项，但是
具体来说，我在上面的代码中添加了什么来告诉图表使用我的自定义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] b ['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表{
color：＃000;
margin-top：10px;
}
.headerRow {
color：＃000;
}
table_div允许我编辑整个表，所以当前CSS代码有一个效果，但当我添加background-color：＃ff0000;例如，它没有效果。与.headerRow相同。背景来自 https：// ajax。 googleapis.com/ajax/static/modules/gviz/1.0/table/table.css ，不想被覆写。
有什么想法为什么会这样？
如果绝对需要，我很乐意禁用Google CSS
一旦你创建了CSS，我发现这是关键让它工作：
var cssClasses = {headerRow：'tblHeaderClass'，hoverTableRow：'tblHighlightClass'}; var options = {showRowNumber：false ，allowHTML：true，'cssClassNames'：cssClasses}; table.draw（data，options）;
使用ticks强制指令cssClassNames成为字符串，并确保使用您声明的对象来定义用于暴露的表元素名称的CSS类。
I have created a table in Google Visualization which uses the following code:
<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>
I wish to be able to change the formatting of the header row and table rows using CSS, I can't figure out how to do this though. I have read through the Configuration Options but being a relative new comer to coding this hasn't helped and need it clearly explained step by step.
Specifically what do I add to the above code to tell the chart to use my custom CSS. And what would I put in my main? CSS stylesheet. Not sure whether it would be (for the header) #headerRow { } or .headerRow { }.
For your information this is being inserted through Wordpress via a custom field if that makes any difference.
If I haven't made myself clear enough in the question, please follow up. Cheers.
UPDATE: @asgallant - still not working when changing to headerCell and tableCell.
My current code is: 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;
}
The table_div allows me to edit the table as a whole, so the current CSS code has an effect but when I add background-color: #ff0000; for example, it has no effect. Same with .headerRow . The background is being taken from https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css and doesn't want to be overrode.
Any idea why this could be?
If absolutely necessary I'd be happy to disable the Google CSS entirely and do it purely off my own CSS sheet.
Once you create the CSS, I found this to be the key to getting it to work:
var cssClasses = {headerRow: 'tblHeaderClass',hoverTableRow: 'tblHighlightClass'};
var options = {showRowNumber: false, allowHTML: true, 'cssClassNames':cssClasses};
table.draw(data,options);
force the directive cssClassNames to string with "ticks" and be sure to use the object you declared to define whe CSS classes to use for the table element names exposed.
这篇关于将CSS应用于Google可视化表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
