這個方法無法套用在Google的協作平台,因為該網頁空間好像不允許引用外部Script(都是自家的API了,怎會有這種限制)
如果想學習套用,請將程式碼以HTML編輯模式貼入文章內文中,並修改程式碼內文有標註//*修改地方(有2處)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Google Visualization API Sample
</title>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
//var query = new google.visualization.Query(
// 'https://docs.google.com/spreadsheets/d/1SXPknVhdGumk-DLLWCijfMV8m11lWI0Fo-BbjF9WCHA/edit?usp=sharing');
//連接的spreadsheet(電子表格)如果是新版的,經測試Query的任何查詢指令似乎都會失效
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=0AkeHSKjTEDu_dDhqOXBXSDFuQm0xR284dkwwalZqWnc&usp=sharing');
//*修改地方1:new google.visualization.Query(Google試算表參照網址)要改成自己的網址
// Apply query language.
//相關QUERY語法請參照https://google-developers.appspot.com/chart/interactive/docs/querylanguage
//query.setQuery('SELECT A,B where D>1');//OK
//query.setQuery('SELECT * where upper(B) contains upper("ja")');//OK
query.setQuery('SELECT * where upper(B) like upper("%jaC%")');//OK
//*修改地方2:query.setQuery(查詢語法)
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// Create and draw the visualization.
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
<!-- visualization.draw(data, null); -->
visualization.draw(data, {showRowNumber: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="border: 0 none; font-family: Arial;">
<div id="table">
</div>
</body>
</html>
套用後的效果如下(請在各標題欄位點一下會有排序效果,如果滑鼠移動到某一列顏色也會有變化)










