谷歌图表

Mula sa simple na Line Chart hanggang sa komplikadong Hierarchical Tree Chart, ang libraryo ng Chartahenyo ng Google ay nagbibigay ng malaking bilang ng mga chart type na maaaring gamitin anumang panahon:

  • Scatter Chart
  • Line Chart
  • Bar / Column Chart
  • Area Chart
  • Pie Chart
  • Donut Chart
  • Kartang Struktura
  • Mapa / Chartahenyo

如何使用 Google Chart？

您如需在的网页中使用 Google Chart，请添加指向图表加载器的链接:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

谷歌图表易于使用。

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

<div id="myChart" style="max-width:700px; height:400px"></div>

<div> 元素必须有一个唯一的 ID。

然后加载 Google Graph API：

  1. 加载 Visualization API 和 corechart 包
  2. 设置一个回调函数，在 API 加载完成后进行调用
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

就这样！

折线图

源代码

function drawChart() {
// 设置数据
var 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]
  ]);
// 设置选项
var options = {
  title: '房价与房屋面积',
  hAxis: {title: '平方米'},
  vAxis: {title: '百万价格'},
  legend: 'none'
};
// 绘制图表
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

亲自试一试

散点图

相同的数据如需生成散点图，请将 google.visualization 更改为 ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

亲自试一试

条形图

源代码

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['意大利', 55],
  ['法国', 49],
  ['西班牙', 44],
  ['美国', 24],
  ['阿根廷', 15]
]);
var options = {
  title: '全球葡萄酒生产'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

亲自试一试

饼图

如需将条形图转换为饼图，只需使用：

google.visualization.PieChart

替换：

google.visualization.BarChart

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

亲自试一试

3D 饼图

如需以 3D 形式显示饼图，只需将 is3D: true 添加到选项中：

var options = {
  title: '全球葡萄酒生产',
  is3D: true
};

亲自试一试