谷歌图表

从简单的折线图到复杂的分层树图，Google 图表库提供了大量即用型图表类型：

散点图
折线图
条形图/柱形图
面积图
饼形图
圆环图
组织结构图
地图/地理图表

如何使用谷歌图表？

要在您的网页中使用 Google 图表，添加链接到图表加载器：

谷歌图表很容易使用。

只需添加一个<div>显示图表的元素：

<div> 元素必须具有唯一的 id。

然后加载 Google Graph API：

加载可视化 API 和 corechart 包
设置API加载时调用的回调函数

1 google.charts.load('current',{packages:['corechart']});

2 google.charts.setOnLoadCallback(drawChart);

就这样！

线形图

源代码

亲自试一试 »

散点图

到散点图相同的数据，将 google.visualization 更改为 ScatterChart：

const chart = new google.visualization.LineChart(document.getElementById('myChart'));

亲自试一试 »

条形图

源代码

function drawChart() {

const data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italy', 55],
  ['France', 49],
  ['Spain', 44],
  ['USA', 24],
  ['Argentina', 15]
]);

const options = {
  title: 'World Wide Wine Production'
};

const chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);

}

亲自试一试 »

饼状图

要转换一个酒吧图表到一个馅饼图表，只需替换：

谷歌.可视化。条形图

和：

谷歌.可视化。饼形图

const chart = new google.visualization. PieChart(document.getElementById('myChart'));

亲自试一试 »

3D 饼图

要以 3D 方式显示饼图，只需添加is3D：真实到选项：

const options = {
title: 'World Wide Wine Production',
is3D: true
};

亲自试一试 »