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. jsp中实现点击文件名称完成下载

    1.文件名称添加点击事件 <a href="javascript:void(0);" id="wjm" onclick="wjxz();&quo ...

  2. PHP正则匹配与文件编码关系

    虽然多数高手认为正则会影响程序效率,但是做数据采集的时候,却很难避免使用正则, 强大的正则表达式用起来很舒服,但是在匹配中文的时候,会出现,明明正则表达式没问题,字符数据里包含符合正则表达式的数据,可 ...

  3. MOBA战斗服务器设计思路

    MOBA作为竞技类的游戏,游戏中实时高精度同步,或者又说延迟容错率的要求还算是比较高的一种. 如何做到这种同步机制呢? 常用的同步机制有两种类型:帧同步 / 指令同步 何谓帧同步? 保证双方客户端逻辑 ...

  4. [转载]完全版线段树 by notonlysuccess大牛

    原文出处:http://www.notonlysuccess.com/ (好像现在这个博客已经挂掉了,在网上找到的全部都是转载) 今天在清北学堂听课,听到了一些很令人吃惊的消息.至于这消息具体是啥,等 ...

  5. bzoj 4870: [Shoi2017]组合数问题 [矩阵乘法优化dp]

    4870: [Shoi2017]组合数问题 题意:求 \[ \sum_{i=0}^{n-1} \binom{nk}{ik+r} \mod p \] \(n \le 10^9, 0\le r < ...

  6. BZOJ 4259: 残缺的字符串 [FFT]

    4259: 残缺的字符串 题意:s,t,星号任意字符,匹配方案数 和上题一样 多乘上一个\(a_{j+i}\)就行了 #include <iostream> #include <cs ...

  7. Java随感

    创新项目要用java,而我只大概会C++,只能靠自学咯~~~随时将一些重要的概念做笔记在这里吧>_< 1.一个源文件中只能有一个public类,一个源文件可以有多个非public类 2.所 ...

  8. LeetCode - 690. Employee Importance

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  9. ubuntu16.04安装ftp服务器

    参考文章: http://www.linuxidc.com/Linux/2017-01/139233.htm 1.检查是否安装vsftpd,如果安装了跳过第二步 vsftpd -v 2.安装vsftp ...

  10. Hadoop源码分类概要整理

    最近突然觉得, 很多掌握的都还是很浅的原理,需要更深入细粒度去了解整个分布式系统的运转机制.于是..开始作死而又作死而又作死的源码之旅. Hadoop包的功能总共有下列几类: tool:提供一些命令行 ...