資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時裝設計
法律研究如何將 Google 圖表新增到你的網頁中？
我們使用 google.charts.load() 將 Google 圖表新增到網頁。使用 draw() 方法繪製圖表。為了顯示，使用 BarChart 類。首先配置圖表資料。圖表的資料位於表格中。
配置圖表資料
我們首先建立一個圖表資料函式。配置要在圖表上顯示的資料。DataTable 是一個特殊的表結構化集合，其中包含圖表的資料。
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Year", "India"],
["2019", 500],
["2020", 800],
["2021", 1000],
["2022", 1200],
["2023", 1400]
]);
設定圖表標題
這裡配置了圖表的選項 -
var options = { title: "Educated people(in millions)" };
使用 BarChart 類繪製圖表
我們使用了 BarChart 類來顯示基於區域的圖表。資料表示 json 資料，options 表示 Google 圖表庫用於繪製圖表的配置 -
var chart = new google.visualization.BarChart(
document.querySelector(".barchartContainer")
);
chart.draw(data, options);
放置圖表
圖表放在 div 中。容器使用 width、heigh 和 margin 屬性進行如下樣式設定 -
.barchartContainer {
width: 550px;
height: 400px;
margin: 0 auto;
font-weight: bold;
}
示例
要在您的網頁中新增 Google 圖表，程式碼如下 −
<!DOCTYPE html>
<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
</script>
<style>
.barchartContainer {
width: 550px;
height: 400px;
margin: 0 auto;
font-weight: bold;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1 style="text-align: center;">
Adding google charts to your web page Example
</h1>
<div class="barchartContainer"></div>
<script language="JavaScript">
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Year", "India"],
["2019", 500],
["2020", 800],
["2021", 1000],
["2022", 1200],
["2023", 1400]
]);
var options = { title: "Educated people(in millions)" };
var chart = new google.visualization.BarChart(
document.querySelector(".barchartContainer")
);
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
已更新於： 2023 年 11 月 15 日
345 次瀏覽
廣告