Применение CSS к таблице визуализации Google
Я создал таблицу в 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, хотя я не могу понять, как это сделать. Я прочиталПараметры конфигурации но быть относительным новичком в кодировании это не помогло и нуждается в четком объяснении шаг за шагом.
В частности, что я добавлю к приведенному выше коду, чтобы указать диаграмме использовать мой пользовательский 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 имеет значение, но когда я добавляю background-color: # ff0000; например, это не имеет никакого эффекта. То же самое с .headerRow. Фон берется изhttps://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css и не хочет быть переутомленным.
Есть идеи, почему это может быть?
Если бы это было абсолютно необходимо, я был бы счастлив полностью отключить Google CSS и сделать это исключительно из своего собственного листа CSS.