Javascript 样式化 Google 图表表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12790553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling Google Charts Table
提问by carlosgg
I am trying to add CSS style to a Google Charts Table. I tried this:
我正在尝试将 CSS 样式添加到 Google Charts Table。我试过这个：
https://developers.google.com/chart/interactive/docs/gallery/table#customproperties
https://developers.google.com/chart/interactive/docs/gallery/table#customproperties
on the first cell (Mike) but it didn't work. I set allowHtml to true in the options variable. How can I change the background, text color, etc. of the individual cells? Thank you.
在第一个单元格（迈克）上，但它没有用。我在 options 变量中将 allowHtml 设置为 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>
采纳答案by J E Carter II
How can I change the background, text color, etc. of the individual cells? Thank you.
如何更改单个单元格的背景、文本颜色等？谢谢你。
Per @Bondye's comment, the answer is found in the developers guide.
根据@Bondye 的评论，答案可以在开发人员指南中找到。
https://developers.google.com/chart/interactive/docs/examples#custom_table_example
https://developers.google.com/chart/interactive/docs/examples#custom_table_example
Define style rules that match your criteria:
定义符合您标准的样式规则：
<style>
.orange-background {
background-color: orange;
}
.orchid-background {
background-color: orchid;
}
.beige-background {
background-color: beige;
}
</style>
Apply them to the table when drawn.
绘制时将它们应用到桌子上。
var cssClassNames = {
'headerRow': 'italic-darkblue-font large-font bold-font',
'tableRow': '',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'};
var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};
var data = new google.visualization.DataTable();
//... add data here ...
var table = new google.visualization.Table(container);
table.draw(data, options);
回答by Max Makhrov
Custom table formatting for google-chartswas tricky for me:
谷歌图表的自定义表格格式对我来说很棘手：
- It worked from the style:
.tableRow { background-color:rgb(246, 253, 253); } - It also worked from standart css:
tr:hover {background-color: ...;} - It sometimes worked only with
!importantcss key:background-color: rgba(141, 186, 238, 0.76) !important;
- 它的工作方式是：
.tableRow { background-color:rgb(246, 253, 253); } - 它也适用于标准 css：
tr:hover {background-color: ...;} - 它有时只适用于
!importantcss 键：background-color: rgba(141, 186, 238, 0.76) !important;
Here's my working sample:
这是我的工作示例：
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', { packages: ['table'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Sex', 'Name', 'Donuts eaten', 'Html'],
['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
['Female', 'Margareth', 8, '<input type="checkbox" id="7" name="check">'],
]);
var table = new google.visualization.Table(document.getElementById('table'));
var options =
{
allowHtml: true,
showRowNumber: true,
width: '100%',
height: '100%'
,
cssClassNames: {
headerRow: 'headerRow',
tableRow: 'tableRow',
oddTableRow: 'oddTableRow',
selectedTableRow: 'selectedTableRow',
// hoverTableRow: 'hoverTableRow',
headerCell: 'headerCell',
tableCell: 'tableCell',
rowNumberCell: 'rowNumberCell'
}
};
table.draw(data, options);
}body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Tables */
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgb(83, 133, 180);
border-color: rgb(151, 150, 168) !important;
color: white;
}
.oddTableRow {
background-color:rgb(232, 246, 247);
}
.tableRow { background-color:rgb(246, 253, 253); }
tr:hover {background-color: rgba(233, 235, 154, 0.76) !important;}
.selectedTableRow {
background-color: rgba(141, 186, 238, 0.76) !important;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Google Charts. Custom HTML & CSS in table</h1>
<div id="table"></div>
</body>
</html>回答by pedrofernandes
For more modern widgets and charts you can apply custom css to Google Charts see this repo for already implemented styles
对于更现代的小部件和图表，您可以将自定义 css 应用于 Google Charts，请参阅此 repo 以了解已实现的样式
