HighCharts之气泡图

1、HighCharts之气泡图源码

bubble.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D气泡图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
	 $('#bubbleChart').highcharts({
		 chart: {
		        type: 'bubble',
		        zoomType: 'xy'
		    },

		    title: {
		    	text: '气泡图'
		    },

		    series: [{
		        data: [[9714,3678,7956],[1294,2374,5860],[9568,4576,1258],[4564,2587,9656],[3668,2567,7893],[2374,3699,4263],[7268,9233,8756],[2351,5669,4230],[3228,2223,3223],[5227,8126,3201]]
		    }, {
		        data: [[2534,1034,8347],[2566,7565,5679],[1167,5774,8776],[8776,5885,9883],[5887,3787,5788],[9078,6543,4344],[3491,3453,1457],[9547,5453,5546],[1545,6457,4458],[5554,2445,8441]]
		    }, {
		        data: [[4347,4457,2561],[2670,1772,4676],[6787,7666,9771],[3868,3780,6660],[5778,9768,6674],[8761,8817,3480],[8343,6450,1433],[6227,7678,7455],[6244,1562,1560],[3560,7657,8442]]
		    }]

		});
  });
</script>
</head>
<body>
   <div id="bubbleChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之气泡图的更多相关文章

  1. HighCharts之气泡图报错

    HighCharts之气泡图报错 具体报错如下: uncaught exception: Highcharts error #17: www.highcharts.com/errors/17     ...

  2. Highcharts 气泡图

    Highcharts 气泡图 配置 chart 配置 配置 chart 的 type 为 'bubble' .chart.type 描述了图表类型.默认值为 "line". cha ...

  3. Highcharts中文网

    官网地址: http://www.hcharts.cn/ http://www.hcharts.cn/p/highchartTable.php 名词解释 英文名  中文名 描述  更多 lang 语言 ...

  4. Highcharts下载与使用_数据报表图

    Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...

  5. Highcharts教程

    Highcharts特性: 兼容性 - 支持所有主流浏览器和移动平台(android.iOS等). 多设备 - 支持多种设备,如手持设备 iPhone/iPad.平板等 免费使用 - 开源免费 轻量 ...

  6. 应用highcharts做直观数据统计

    最近在看上了统计类的东东,发现以前端图表神器:highcharts Highcharts是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯Js图表库,Highcharts支持的图表类型有直线 ...

  7. 使用highcharts绘制美观的燃尽图

    使用highcharts绘制美观的燃尽图 助教在博客中介绍了两种绘制燃尽图的方法,但是我们组在使用时发现有些任务不适合写进issue,而且网站生成的燃尽图不是很美观,因此我们打算使用其他方法自己绘制燃 ...

  8. 网页图表Highcharts实践教程之认识Highcharts

    网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...

  9. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

随机推荐

  1. 浅探element-ui2组件源码之upload

    最近不小心更新了element-ui的版本,已经到了2.1.0,以前修改的源码都失效了. 于是重新尝试下面的指令重新修改: git clone https://github.com/ElemeFE/e ...

  2. github上最好的开源MMORPG - stendhal

    Stendhal is a fully fledged multiplayer online adventures game (MORPG). It is completely open source ...

  3. jquery实现上传图片本地预览效果

    html: <img id="pic" src="" ><input id="upload" name="fil ...

  4. if语句中同时判断多个条件的多种方法

    总结一下自己经常用到的python中的if语句同时判断多个条件的不同方法,假设有: x, y, z = 0, 1, 0 方法一,多个逻辑运算符一起使用,这也是最常用的写法: if x == 1 or ...

  5. HBase 数据库检索性能优化策略--转

    https://www.ibm.com/developerworks/cn/java/j-lo-HBase/index.html HBase 数据表介绍 HBase 数据库是一个基于分布式的.面向列的 ...

  6. dubbo 线程池

    在dubbo调用过程中被调用方有两个线程池:io线程池,业务线程池. 这也是dubbo调优的点. 配置信息: <dubbo:protocol name="dubbo" dis ...

  7. javaweb下载文件模板

    import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import javax ...

  8. 阿里云学习之API网关

    注:此处仅供api的创建做一个补充参考,API网关的优缺点及创建过程中的参数详情,请参考阿里云开放文档:https://helpcdn.aliyun.com/document_detail/29478 ...

  9. 微信小程序模板发送,openid获取，以及api.weixin.qq.com不在合法域名内解决方法

    主要内容在标题三,老手可直接跳到标题三. 本文主要解决个人开发者模板消息发送的问题(没有服务器,不能操作服务器的情况) 针对api.weinxin.qq.com不在以下合法域名列表内的问题提出的解决方 ...

  10. SmokePing 部署实践

    1 通过 yum 安装依赖的库以及环境 yum install rrdtool wqy* fping curl bind-utils httpd httpd-devel \ perl perl-FCG ...