圆饼示例:

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> // Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() { // Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 3],
['Pepperoni', 2]
]); // Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':800,
'height':600}; // Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head> <body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>

运行效果:

annotation-charts

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotationchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'test1');
data.addColumn('string', 'test2');
data.addColumn('string', 'test3');
data.addColumn('number', 'test4');
data.addColumn('string', 'test5');
data.addColumn('string', 'test6');
data.addRows([
[new Date(2014, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2114, 2, 16), 24045, 'hello1', 'hello2',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'hello3', 'hello4',
15766, 'hello5', 'hell06'],
[new Date(2314, 2, 18), 12284, 'hello7', 'hello8',
34334, 'hello9', 'hello10'],
[new Date(2314, 2, 19), 8476, 'hello11', 'hello12',
66467, 'hello13', 'hello14'],
[new Date(2314, 2, 20), 0, 'hello15', 'hello16',
79463, 'hello17', 'hello18']
]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = {
displayAnnotations: true
}; chart.draw(data, options);
}
</script>
</head> <body>
<div id='chart_div' style='width: 900px; height: 500px;'></div>
</body>
</html>

效果图:

area-charts:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]); var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}; var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

效果图:

bar-charts:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]); var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
}; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, options);
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

效果图:

bubble-charts:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]); var options = {
colorAxis: {colors: ['yellow', 'red']}
}; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

效果图:

calendar-charts:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["calendar"]});
google.setOnLoadCallback(drawChart); function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); var options = {
title: "Red Sox Attendance",
height: 350,
}; chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>

效果图:

candlestick-charts:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true); var options = {
legend:'none'
}; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

效果图:

column-charts:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]); var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
}; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

效果图:

Google Chart API学习(一)的更多相关文章

  1. 使用Google Chart API绘制组合图

    Google Chart API 绘图 组合图作者:方倍工作室 地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...

  2. Google Chart API 参考 中文版

    Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...

  3. 使用google chart api生成报表图片

    使用google chart api生成报表图片 截图 折线图 饼图 柱状图   实现方法 原理是调用google的报表服务,动态拼接url字符串,得到一张图片,数据和说明文字都是从url中传进去的. ...

  4. google map api 学习笔记

    (1)地图的缩放监听函数 google.maps.event.addlistener(map,"zoom_change",function(){ 缩放级别变化后的函数. }); ( ...

  5. 转载总结一些关于Google chart api的知识

    <script type="text/javascript">      google.setOnLoadCallback(drawChartLine);      f ...

  6. Google Map API 学习六

    今天其实收货很大的 1.new google.maps.Circle 就是如何在地图上标注一个圆 3.getAnimation 在这里是通过获取Marker是否存在动作,然后如果存在动作的话,就将动作 ...

  7. Google Map API 学习五

    今天其实收货很大的 1.InfoWindow google.maps.InfoWindow class An overlay that looks like a bubble and is often ...

  8. Google Map API学习1

    这一段时间公司一个新产品上线, 做超市代购的 这样,就需要计算每个门店也就是超市,距离小区之间的距离. 我们用的是Google Map 1.批量对地址进行编码,也就是将地址批量转化成对应的Goole ...

  9. 利用 Google Chart API 生成二维码大小不一致

    大小不一致是由于 chl  参数内容不一样导致的,而 chs 参数只能指定生成图片的大小,不能指定生成具体二维码大小. 比如:https://chart.googleapis.com/chart?ch ...

  10. Google Map API 学习六-设置infoWindow的长宽

随机推荐

  1. 嫌 OSS 查询太慢?看我们如何将速度提升 10 倍!

    背景 HDFS 是 Hadoop 生态的默认存储系统,很多数据分析和管理工具都是基于它的 API 设计和实现的.但 HDFS 是为传统机房设计的,在云上维护 HDFS 一点也不轻松,需要投入不少人力进 ...

  2. ASP.NET Core分布式项目实战(oauth2 + oidc 实现 client部分)--学习笔记

    任务16:oauth2 + oidc 实现 client部分 实现 client 之前启动一下上一节的 server,启动之前需要清除一些代码 注释 Program 的 MigrateDbContex ...

  3. Argocd学习

    argocd官网文档链接 ArgoCD官网文档 在K8S集群使用argocd命令将集群添加到argcd的cluster列表中 argocd cluster add kubernetes-admin@i ...

  4. JS Leetcode 304. 二维区域和检索 - 矩阵不可变,彻底弄懂二维数组前缀和

    壹 ❀ 引 我在JS LeetCode 303. 区域和检索 - 数组不可变,一维数组的前缀和一文中,记录了一维数组求区间合的解题思路,正好还有一题的升级版,题目来自leetcode304. 二维区域 ...

  5. OpenWrt的多WAN和静态路由设置

    配置第二个WAN 增加新VLAN Network->Switch 增加新的VLAN, 默认安装已经存在两个VLAN ID 1和2,新增的VLAND ID为3. 对应这行新记录,将CPU设为tag ...

  6. Spring Boot学生信息管理系统项目实战-3.专业管理

    1.获取源码 源码是捐赠方式获取,详细请QQ联系我 :) 2.实现效果 3.项目源码 只挑重点讲,详细请看源码. 专业管理实现学校专业的增删改查,与学院管理相关联. 前端代码 <!--编辑表单- ...

  7. oracle中约束(constraints)是如何影响查询计划的

    原文: http://www.oracle.com/technetwork/issue-archive/2009/09-may/o39asktom-096149.html oracle中约束(cons ...

  8. RMAN REPORT NEED BACKUP DAYS 5

    47.You issue the following command on the RMAN prompt. REPORT NEED BACKUP DAYS 5; Which statement is ...

  9. html中iframe调用兄弟iframe中的js方法

    问题说明 最近工作中碰到一个页面有一个主iframe A,用于操作主要业务元素.其中有一个弹出框里面也嵌入了一个iframe B, 此时,我需要在B中调用A中JS的指定方法.下面咱们来通过例子还原一下 ...

  10. 本地启动RocketMQ未映射主机名产生的超时问题

    问题描述 参考RocketMQ官方文档在本地启动一个验证环境的时候遇到超时报错问题. 本地环境OS:CentOS Linux release 8.5.2111 首先,进入到RocketMQ安装目录,如 ...