如何 - 谷歌圖表
瞭解如何將谷歌圖表新增到您的網頁中。
谷歌餅圖
從一個簡單的基礎網頁開始。
新增一個 id 為 "piechart" 的 <div> 元素
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的網頁</h1>
<div id="piechart"></div>
</body>
<html>
新增對 google.com 上圖表 API 的引用
示例
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
並新增一個 JavaScript 函式
示例
<script type="text/javascript">
// 載入谷歌圖表
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>
自己動手試一試 »
