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. CSS核心内容之浮动

    1.浮动涉及到左浮动,右浮动,清除浮动． 2.浮点的特点: 1.向指定的方向浮动,并且让出空间 2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里 3.如果 ...

  2. iOS-CoreText的那些事【电子书的那些事】

    这段时间在搞电子书,把这些天出现的问题归总下,我还是希望电子书的格式包括返回的数据,可直观的反应出客户端想表达的内容:原生的体验还是比较好的,希望对coretext再深入. 1.判断点击的位置是否在某 ...

  3. python监控接口请求

    #!/usr/bin/env python #coding=utf8 import time,os,sched,urllib,httplib import smtplib import string ...

  4. POJ [P3020] Antenna Placement

    二分图匹配求最小边覆盖 建图方法中的黑白染色法,题目中说信号可以覆盖相邻两个块,那么我们可以将给定的地图染成国际象棋棋盘的样子,一个黑格可以与周围的四个白格共用信号,对于城市,从每一个黑格出发,向其周 ...

  5. UOJ Round #15 [构造 | 计数 | 异或哈希 kmp]

    UOJ Round #15 大部分题目没有AC,我只是水一下部分分的题解... 225[UR #15]奥林匹克五子棋 题意:在n*m的棋盘上构造k子棋的平局 题解: 玩一下发现k=1, k=2无解,然 ...

  6. 张高兴的 Windows 10 IoT 开发笔记：部署 ASP.NET Core 2 应用

    今天是大年初二,都去走亲戚了吧,享受一下这难得的能和亲友相聚的时光.而我就不一样了,今天一回到家就又开始瞎折腾了,哈哈哈. 问题背景 最近花了点时间用 ASP.NET Core 2 写了个个人博客,中 ...

  7. R语言-选择样本数量

    功效分析:可以帮助在给定置信度的情况下,判断检测到给定效应值时所需的样本量,也可以在给定置信水平的情况下,计算某样本量内可以检测到的给定效应值的概率 1.t检验 案例:使用手机和司机反应时间的实验 l ...

  8. python如何讲一个文件中的图片分到两个

    最近在做一个图像分类的比赛,作为初次接触深度学习的菜鸟,上手了keras.说实话,除了keras教程,中文博客的技术支持太差了.正在头大的学习中...废话不多说,记录一下学习中的一些小细节.在遇到ge ...

  9. 超级简便的容器化部署工具（使用 ASP.NET Core 演示）

    Docker 改变了我们部署网站的方式,从原先的手动编译打包上传,到现在的构建镜像然后推送部署,让我们在配置环境上所花费的时间大大减少了.不仅如此,通过一系列相关的工具配合,可以很轻松的实现 CI.C ...

  10. JDBCTemplate与模板设计方法(二)

    前言:上一篇博客介绍了模板方法模式,并且给出了一个小demo,简单对模板方法进行了实现,接下来我们把目光转向spring的源码JDBCTemplate,看一看spring是如何对jdbc进行高度封装的 ...