jQuery插件HighCharts实现气泡图效果示例【附demo源码】


Posted in Javascript onMarch 13, 2017

本文实例讲述了jQuery插件HighCharts实现气泡图效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 气泡图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/highcharts-more.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>

运行效果图如下:

jQuery插件HighCharts实现气泡图效果示例【附demo源码】

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
jQuery实现大图轮播
Feb 13 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
干货!教大家如何选择Vue和React
Mar 13 #Javascript
JavaScript 数据类型详解
Mar 13 #Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 #Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 #Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 #Javascript
js实现手机发送验证码功能
Mar 13 #Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 #Javascript
You might like
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
python自带的http模块详解
2016/11/06 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
查看django版本的方法分享
2018/05/14 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
python给list排序的简单方法
2020/12/10 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
个人工作总结范文2014
2014/11/07 职场文书
房屋认购协议书
2015/01/29 职场文书
学生个人总结范文
2015/02/15 职场文书
火烧圆明园观后感
2015/06/03 职场文书
教师节随笔
2015/08/15 职场文书