產生DataTable方法有google.visualization.DataTable、google.visualization.arrayToDataTable、google.visualization.Query，後續也會一起說明，以下範例先以google.visualization.DataTable操作，有興趣的朋友可參考Google Charts線上文件DataTables and DataViews。
在Google雲端硬碟中建立一個專案，新增Google Apps Script檔案Code.gs，輸入以下程式碼。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function doGet() { | |
| return HtmlService | |
| .createTemplateFromFile("index.html") | |
| .evaluate() | |
| .setSandboxMode(HtmlService.SandboxMode.IFRAME); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html> | |
| <head> | |
| <title>Google Charts</title> | |
| <!-- load Google AJAX API --> | |
| <script type="text/javascript" src="http://www.google.com/jsapi"></script> | |
| <script type="text/javascript"> | |
| //load the Google Visualization API and the chart | |
| google.load('visualization', '1', {'packages': ['corechart']}); | |
| //set callback | |
| google.setOnLoadCallback (createChart); | |
| //callback function | |
| function createChart() { | |
| //create data table object | |
| var dataTable = new google.visualization.DataTable(); | |
| //define columns | |
| dataTable.addColumn('string', '編號'); | |
| dataTable.addColumn('number', '數值'); | |
| dataTable.addColumn('number', '2倍'); | |
| dataTable.addColumn('number', '平方'); | |
| //define rows of data | |
| for(var i = 0 ; i <= 10 ; i++) | |
| { | |
| dataTable.addRows([[String(i), i ,2*i, Math.pow(i, 2)]]); | |
| } | |
| //instantiate our chart object | |
| var chart = new google.visualization.LineChart (document.getElementById('chart')); | |
| //define options for visualization | |
| var options = {width: 1027, | |
| height: 768, | |
| title: '數值計算'}; | |
| //draw our chart | |
| chart.draw(dataTable, options); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!--Div for our chart --> | |
| <div id="chart"></div> | |
| </body> | |
| </html> |
範例網頁連結。
參考資料：
- Having fun with Google charts: double y-axes and more!
- How to Use Google Chart Tools with Web Applications
- Edit fiddle - JSFiddle
留言版