Google 圖表教程 · ZetCode 中文系列教程

# Google 圖表教程 > 原文： [https://zetcode.com/web/googlecharts/](https://zetcode.com/web/googlecharts/) Google 圖表教程是 Google 圖表庫的入門教程。它顯示了如何使用 Google 圖表庫在 JavaScript 中創建交互式圖表。在我們的示例中，我們創建了散點圖，折線圖和餅圖。 Google 圖表是一種交互式 Web 服務，可根據用戶提供的信息創建圖形圖表。用戶使用嵌入在網頁中的 JavaScript 提供數據和格式；作為響應，服務發送圖表圖像。該庫提供了大量現成的圖表類型。圖表具有一些默認外觀，我們可以更改圖表的外觀。圖表具有高度的交互性，并公開事件，使我們可以將它們連接起來以創建復雜的結構。圖表使用 HTML5/SVG 技術呈現，以提供跨瀏覽器和跨平臺的兼容性（包括 iPhone，iPad 和 Android）。 ## `DataTable` 圖表填充有`DataTable`類。它是一個二維的可變值表。它具有用于排序，修改和過濾數據的方法。可以直接從網頁，數據庫或任何支持圖表工具數據源協議的數據提供者中填充它。 ## 散點圖散點圖是一種圖形或數學圖，使用笛卡爾坐標顯示一組數據的兩個變量的值。使用`google.visualization.ScatterChart`創建一個散點圖。 `scatter.html` ```js <html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Date'); data.addColumn('number', 'Price'); data.addRows([ ['Mar 14', 43], ['Nov 14', 39], ['Jan 15', 42], ['Mar 15', 37], ['Dec 15', 34], ['Feb 16', 40] ]); var options = { title: "Gold Prices", width: 600, height: 400, vAxis: {title: 'USD/kg'}, legend: { position: "none" } }; var chart = new google.visualization.ScatterChart(document.getElementById('mychart')); chart.draw(data, options); } </script> </head> <body> <div id="mychart"></div> </body> </html> ``` 在此示例中，我們創建了一個散點圖。 ```js <script src="https://www.gstatic.com/charts/loader.js"></script> <script> ``` 我們加載圖表 API。 ```js google.charts.load('current', {'packages':['corechart']}); ``` 第一步，我們加載可視化 API 和`corechart`包。 ```js google.charts.setOnLoadCallback(drawChart); ``` 我們設置了在加載 Google 可視化 API 時運行的回調。 ```js function drawChart() { ``` 在`drawChart()`函數中，我們創建并填充數據表，生成圖表并繪制。 ```js var data = new google.visualization.DataTable(); ``` 我們創建數據表。 ```js data.addColumn('string', 'Date'); data.addColumn('number', 'Price'); ``` 用`addColumn()`方法添加列。參數是數據類型和標簽。 ```js data.addRows([ ['Mar 14', 43], ['Nov 14', 39], ['Jan 15', 42], ['Mar 15', 37], ['Dec 15', 34], ['Feb 16', 40] ]); ``` 數據通過`addRows()`方法添加到數據表中。 ```js var options = { title: "Gold Prices", width: 600, height: 400, vAxis: {title: 'USD/kg'}, legend: { position: "none" } }; ``` 在這里，我們設置圖表選項。我們為圖表賦予標題，設置其大小，垂直軸標簽并禁用圖例。 ```js var chart = new google.visualization.ScatterChart(document.getElementById('mychart')); ``` 我們使用`google.visualization.ScatterChart`生成圖表。我們將圖表選項傳遞給`draw()`方法。 ```js chart.draw(data, options); ``` 該圖表是用`draw()`方法繪制的。我們將圖表選項傳遞給`draw()`方法。 ```js <body> <div id="mychart"></div> </body> ``` 這是將保存圖表的標記。 ![Scatter chart](https://img.kancloud.cn/3c/19/3c19958c3a92875822c06816bc1a4f7d_493x374.jpg) 圖：散點圖 ## 折線圖折線圖是一種基本類型的圖表，它將信息顯示為由直線段連接的一系列數據點。使用`google.visualization.LineChart`創建折線圖。 `linechart.html` ```js <html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Salary'], ['18', 567], ['20', 612], ['25', 800], ['30', 980], ['40', 1410], ['50', 2350] ]); var options = { title: 'Average salary per age', curveType: 'function', width:900, height:500, vAxis: {title: 'Salary (Eur)'}, hAxis: {title: 'Age'}, legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('mychart')); chart.draw(data, options); } </script> </head> <body> <div id="mychart"></div> </body> </html> ``` 在此示例中，我們有一個折線圖，顯示每個年齡段的平均工資。 ```js var data = google.visualization.arrayToDataTable([ ['Age', 'Salary'], ['18', 567], ['20', 612], ['25', 800], ['30', 980], ['40', 1410], ['50', 2350] ]); ``` `arrayToDataTable()`是使用二維數組并將其轉換為`DataTable`的輔助方法。 ```js var options = { title: 'Average salary per age', curveType: 'function', ... ``` 我們可以通過將`curveType`設置為`function`來平滑線條。 ```js var chart = new google.visualization.LineChart(document.getElementById('mychart')); ``` 折線圖是使用`google.visualization.LineChart`生成的。 ![Line chart](https://img.kancloud.cn/65/b6/65b618649e5c93dc8a8fa2847addbf0a_499x400.jpg) 圖：折線圖 ## 餅形圖餅圖是圓形圖，將其分成多個切片以說明數值比例。使用`google.visualization.PieChart`創建餅圖。 `piechart.html` ```js <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Fruit'); data.addColumn('number', 'Quantity'); data.addRows([ ['Oranges', 38], ['Pears', 45], ['Plums', 24], ['Blueberries', 10] ]); var options = { 'title': 'Fruits', 'titleTextStyle': { 'fontSize': '22', }, 'width':500, 'height':400 }; var chart = new google.visualization.PieChart(document.getElementById('mychart')); chart.draw(data, options); } </script> </head> <body> <div id="mychart"></div> </body> </html> ``` 該示例創建一個餅圖。 ```js var data = new google.visualization.DataTable(); data.addColumn('string', 'Fruit'); data.addColumn('number', 'Quantity'); data.addRows([ ['Oranges', 38], ['Pears', 45], ['Plums', 24], ['Blueberries', 10] ]); ``` 在圖表中，我們顯示了可用水果的比例。 ```js var options = { 'title': 'Fruits', 'titleTextStyle': { 'fontSize': '22', }, 'width':500, 'height':400 }; ``` 在圖表選項中，我們設置圖表標題，更改默認標題字體大小并設置圖表的大小。 ```js var chart = new google.visualization.PieChart(document.getElementById('chart_div')); ``` 使用`google.visualization.PieChart`創建餅圖。 ![Pie chart](https://img.kancloud.cn/5d/35/5d35980beb64713cfb2cbef16c5eb0f0_442x342.jpg) 圖：餅圖在本教程中，我們使用 Google 圖表庫創建了散點圖，折線圖和餅圖。