Google Chart API学习(三)
书接上回：
maps-charts:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['map']});
google.setOnLoadCallback(drawMap); function drawMap () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addColumn('string', 'Marker') data.addRows([
['New York City NY, United States', 'New York', 'blue' ],
['Scranton PA, United States', 'Scranton', 'green'],
['Washington DC, United States', 'Washington', 'pink' ],
['Philadelphia PA, United States', 'Philly', 'green'],
['Pittsburgh PA, United States', 'Pittsburgh', 'green'],
['Buffalo NY, United States', 'Buffalo', 'blue' ],
['Baltimore MD, United States', 'Baltimore', 'pink' ],
['Albany NY, United States', 'Albany', 'blue' ],
['Allentown PA, United States', 'Allentown', 'green']
]);
var url = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/'; var options = {
zoomLevel: 6,
showTip: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div')); map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
效果图：
org-charts:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["orgchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip'); data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]); var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
效果图：
sankey-diagrams-charts:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["sankey"]});
google.setOnLoadCallback(drawChart); function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ]
]); // Sets chart options.
var options = {
width: 600,
}; // Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>
效果图：
scatter-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 = new google.visualization.DataTable();
data.addColumn('number');
data.addColumn('number'); var radius = 100;
for (var i = 0; i < 6.28; i += 0.1) {
data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
} // Our central point, which will jiggle.
data.addRow([0, 0]); var options = {
legend: 'none',
colors: ['#087037'],
pointShape: 'star',
pointSize: 18,
animation: {
duration: 200,
easing: 'inAndOut',
}
}; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event.
google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event.
google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() {
var x = data.getValue(data.getNumberOfRows() - 1, 0);
var y = data.getValue(data.getNumberOfRows() - 1, 1);
x += 5 * (Math.random() - 0.5);
y += 5 * (Math.random() - 0.5);
if (x * x + y * y > radius * radius) {
// Out of bounds. Bump toward center.
x += Math.random() * ((x < 0) ? 5 : -5);
y += Math.random() * ((y < 0) ? 5 : -5);
}
data.setValue(data.getNumberOfRows() - 1, 0, x);
data.setValue(data.getNumberOfRows() - 1, 1, y);
chart.draw(data, options);
}
}
</script>
</head>
<body>
<div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
</body>
</html>
效果图：
stepped-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([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]); var options = {
title: 'The decline of \'The 39 Steps\'',
vAxis: {title: 'Accumulated Rating'},
isStacked: true
}; var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
效果图：
table-charts:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["table"]});
google.setOnLoadCallback(drawTable); function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
效果图：
timelines-charts:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart); function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
tree-map-charts:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["treemap"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['Brazil', 'America', 11, 10],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['Italy', 'Europe', 17, 4],
['UK', 'Europe', 21, -5],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Laos', 'Asia', 4, 34],
['Mongolia', 'Asia', 1, -5],
['Israel', 'Asia', 12, 24],
['Iran', 'Asia', 18, 13],
['Pakistan', 'Asia', 11, -52],
['Egypt', 'Africa', 21, 0],
['S. Africa', 'Africa', 30, 43],
['Sudan', 'Africa', 12, 2],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]); tree = new google.visualization.TreeMap(document.getElementById('chart_div')); tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
}); }
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
效果图：
trendlines-charts:
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> <script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]); var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
}; var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
</body>
</html>
效果图：
waterfall-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', 28, 28, 38, 38],
['Tue', 38, 38, 55, 55],
['Wed', 55, 55, 77, 77],
['Thu', 77, 77, 66, 66],
['Fri', 66, 66, 22, 22]
// Treat the first row as data.
], true); var options = {
legend: 'none',
bar: { groupWidth: '100%' }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
}
}; 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>
效果图：
wordtrees-charts：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["wordtree"]});
google.setOnLoadCallback(drawChart); function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['cats are better than dogs'],
['cats eat kibble'],
['cats are better than hamsters'],
['cats are awesome'],
['cats are people too'],
['cats eat mice'],
['cats meowing'],
['cats in the cradle'],
['cats eat mice'],
['cats in the cradle lyrics'],
['cats eat kibble'],
['cats for adoption'],
['cats are family'],
['cats eat mice'],
['cats are better than kittens'],
['cats are evil'],
['cats are weird'],
['cats eat mice'],
]
); var options = {
wordtree: {
format: 'implicit',
word: 'cats'
}
}; var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
效果图：
miscellaneous-charts:
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['gauge']}]}">
</script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(drawGauge); var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,
redFrom: 250, redTo: 280, minorTicks: 5};
var gauge; function drawGauge() {
gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', 'Engine');
gaugeData.addColumn('number', 'Torpedo');
gaugeData.addRows(2);
gaugeData.setCell(0, 0, 120);
gaugeData.setCell(0, 1, 80); gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(gaugeData, gaugeOptions);
} function changeTemp(dir) {
gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
gauge.draw(gaugeData, gaugeOptions);
}
</script>
</head>
<body>
<div id="gauge_div" style="width:280px; height: 140px;"></div>
<input type="button" value="Go Faster" onclick="changeTemp(1)" />
<input type="button" value="Slow down" onclick="changeTemp(-1)" />
</body>
</html>
效果图：
Google Chart API学习(三)的更多相关文章
- Google Map API 学习三
- Google Chart API 参考 中文版
Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
- 使用Google Chart API绘制组合图
Google Chart API 绘图 组合图作者:方倍工作室 地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...
- 使用google chart api生成报表图片
使用google chart api生成报表图片 截图 折线图 饼图 柱状图 实现方法 原理是调用google的报表服务,动态拼接url字符串,得到一张图片,数据和说明文字都是从url中传进去的. ...
- google map api 学习笔记
(1)地图的缩放监听函数 google.maps.event.addlistener(map,"zoom_change",function(){ 缩放级别变化后的函数. }); ( ...
- 转载总结一些关于Google chart api的知识
<script type="text/javascript"> google.setOnLoadCallback(drawChartLine); f ...
- Google Map API 学习六
今天其实收货很大的 1.new google.maps.Circle 就是如何在地图上标注一个圆 3.getAnimation 在这里是通过获取Marker是否存在动作,然后如果存在动作的话,就将动作 ...
- Google Map API 学习五
今天其实收货很大的 1.InfoWindow google.maps.InfoWindow class An overlay that looks like a bubble and is often ...
- Google Map API学习1
这一段时间公司一个新产品上线, 做超市代购的 这样,就需要计算每个门店也就是超市,距离小区之间的距离. 我们用的是Google Map 1.批量对地址进行编码,也就是将地址批量转化成对应的Goole ...
- Java数据持久层框架 MyBatis之API学习三（XML 映射配置文件）
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...
随机推荐
- Cygwin，在windows中使用linux命令
习惯了 linux 命令的快捷操作,使用 winodws 的 shell 感觉效率非常低下,于是开始搜寻工具支持. 刚开始搜到的是 GnuWin32,但是它已经停止更新维护了,于是找到了 Cygwin ...
- 2022 JuiceFS 社区用户调研结果出炉
为了使 JuiceFS 的发展更贴合用户的真实需求,我们在三周前向社区发出了一份调研问卷.此次调研面向已经将 JuiceFS 应用于生产环境的用户,了解其在应用 JuiceFS 前和使用中的体验与评价 ...
- 全世界 LoRA 训练脚本，联合起来!
来自社区的 SD-XL Dreambooth LoRA 微调最佳实践指南 太长不看版 我们把 Replicate 在 SDXL Cog 训练器中使用的枢轴微调 (Pivotal Tuning) 技术与 ...
- mysql 索引优化 explain，复合索引，联合索引，优化 user_base 和 log_login 实战
本节是关于MySQL的复合索引相关的知识,两个或更多个列上的索引被称作复合索引,本文主要介绍了mysql 联合索引生效的条件及失效的条件 对于复合索引:Mysql从左到右的使用索引中的字段,一个查询可 ...
- .NET Core开发实战（第16课：选项数据热更新：让服务感知配置的变化）--学习笔记
16 | 选项数据热更新:让服务感知配置的变化 选项框架还有两个关键类型: 1.IOptionsMonitor 2.IOptionsSnapshot 场景: 1.范围作用域类型使用 IOptinsSn ...
- 使用mail发送邮件
使用mail发送邮件 只做个简单介绍,使用场景不多 1.安装mail yum install mailx -y 2.配置 1)配置文件在/etc/mail.rc,有兴趣的可以仔细读一下默认的配 ...
- SSD 表项管理概述（一）——L1、L2、L3
分类 名称 说明 映射表相关 L1 Table 记录每个4KB用户数据在SSD上的存放物理地址: L2 Table 记录每个sub L1 Table在SSD上的存放物理地址: L3 Table 记录每 ...
- An Introduction to ANYDATA
以下内容来自Oracle FAQ writen By Kevin,关于ANYDATA类型在项目中的应用. My newest project needed to create a record kee ...
- IDEA git分支回退指定的历史版本
https://blog.csdn.net/woshi1226a/article/details/86664159
- Java JVM——7.本地方法栈
本地方法栈 Java虚拟机栈于管理Java方法的调用,而本地方法栈用于管理本地方法的调用. 本地方法栈,也是线程私有的. 允许被实现成固定或者是可动态扩展的内存大小.(在内存溢出方面是相同的) ✎ 如 ...