# 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

``` 在此示例中，我们创建了一个散点图。 ```js

``` 在此示例中，我们有一个折线图，显示每个年龄段的平均工资。 ```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](img/e16a8f6670e5995ad300f2dc5df44863.jpg) 图：折线图 ## 饼形图饼图是圆形图，将其分成多个切片以说明数值比例。使用`google.visualization.PieChart`创建饼图。 `piechart.html` ```js

``` 该示例创建一个饼图。 ```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](img/e735bc3557f8ee50313fa05579535a17.jpg) 图：饼图在本教程中，我们使用 Google 图表库创建了散点图，折线图和饼图。