3
我有一个简单的Google可视化仪表板示例,带有一个categorypicker控件和一个表格。我的代码如下。谷歌可视化仪表板表格中的Grand Total
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data.
var data = google.visualization.arrayToDataTable([
['Metric', 'Value'],
['CPU' , 12],
['Memory', 20],
['Disk', 7],
['Network', 54]
]);
// Define a category picker for the 'Metric' column.
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'Metric',
'ui': {
'allowTyping': false,
'allowMultiple': true,
'selectedValuesLayout': 'belowStacked'
}
},
});
// Define a table.
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart',
'options': {
'width': 400,
'height': 180
}
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the category picker to affect the table
bind(categoryPicker, table).
// Draw the dashboard
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
我坚持一个问题,我希望总值的最后总和。如何在表格末尾再添加一行,以显示第二列中所有值的总和。即最初应该显示全部四行的总数,并且当应用过滤器时,它应该显示过滤行值的总和。
这就是我确切需要的@jmac。我跟着你的第二个例子(仪表板)和我的[代码在这里](http://jsfiddle.net/eWQhn/)。我使用'var query = new google.visualization.Query()'方法从[此电子表格]中获取数据(https://docs.google.com/spreadsheet/ccc?key=0AozvCNI02VmpdFBsVkxOQ3NENVZ1djhxVmZUNUdtY0E)。但我再次停下来在桌子上再增加一行。我尝试'data.addRow(['Total',group.getValue(0,1)]);'但它给出了一个错误。 – mpsbhat 2013-04-23 04:42:38
请自行试一试。如果你不能解决问题,那么请提出一个单独的问题,将努力和细节放在你正在尝试的内容上,问题是什么以及你卡在哪里。在你问问之前,**请**尝试自己做,并且在你问之前理解我链接的代码在做什么。如果你花时间去研究它,你可以自己弄清楚它,而且调试自己的代码比用别人去查看它更容易。 – jmac 2013-04-23 05:24:37
当然@jmac。我会尝试自己。 – mpsbhat 2013-04-23 06:33:24