谷歌图表
从简单的折线图到复杂的层次树状图，谷歌图表库提供了大量现成的图表类型。
- 散点图
- 折线图
- 条形图/柱状图
- 面积图
- 饼图
- 圆环图
- 组织结构图
- 地图/地理图表
如何使用谷歌图表？
要在您的网页中使用谷歌图表，请添加一个链接到图表加载器。
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
谷歌图表易于使用。
只需添加一个<div>元素来显示图表。
<div id="myChart" style="max-width:700px; height:400px"></div>
该<div>元素必须具有唯一的 ID。
然后加载谷歌图表 API。
- 加载可视化 API 和 corechart 包。
- 设置一个回调函数，在 API 加载时调用。
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
就这样！
折线图
源代码
function drawChart() {
// 设置数据
const data = google.visualization.arrayToDataTable([
['价格', '大小'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// 设置选项
const options = {
title: '房价与面积的关系',
hAxis: {title: '平方米'},
vAxis: {title: '百万单位的价格'},
legend: 'none'
};
// 绘制图表
const chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
散点图
要散点图相同数据，请将google.visualization更改为ScatterChart
const chart = new google.visualization.LineChart(document.getElementById('myChart'));
条形图
源代码
function drawChart() {
const data = google.visualization.arrayToDataTable([
['国家', '毫升'],
['意大利', 55],
['法国', 49],
['西班牙', 44],
['美国', 24],
['阿根廷', 15]
]);
const options = {
title: '全球葡萄酒产量'
};
const chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
饼图
要将条形图转换为饼图，只需替换
google.visualization.BarChart
与
google.visualization.PieChart
const chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D 饼图
要以 3D 方式显示饼图，只需将is3D: true添加到选项中
const options = {
title: '全球葡萄酒产量',
is3D: true
};
