数据结构
网络
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 次浏览
广告