什麼是 Google Charts?
Google Maps 是一個 Google API
Google Fonts 是一個 Google API
Google Charts 是一個 Google API
瞭解如何在您的網頁中新增 Google Charts。
Google 餅圖
從一個簡單的基本網頁開始。
新增一個 ID 為 "piechart" 的 <div> 元素
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的網頁</h1>
<div id="piechart"></div>
</body>
<html>
新增來自 google.com 的 Chart API 的引用
示例
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
並新增一個 JavaScript 函式
示例
<script type="text/javascript">
// 載入 google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// 繪製圖表並設定圖表值
function drawChart() {
var data = google.visualization.arrayToDataTable([
['任務', '每天花費時間'],
['工作', 8],
['朋友', 2],
['吃飯', 2],
['看電視', 2],
['健身', 2],
['睡覺', 8]
]);
// 可選；新增標題並設定圖表的寬度和高度
var options = {'title':'我的平均一天', 'width':550, 'height':400};
// 在 ID 為 "piechart" 的 <div> 元素內顯示圖表
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
自己動手試一試 »
