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 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
如何使JavaScript休眠或等待
Apr 27 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下MAIL的另一解决方案
2006/10/09 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python简单遍历字典及删除元素的方法
2016/09/18 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
顶岗实习计划书
2014/01/10 职场文书
给导游的表扬信
2014/01/10 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
房屋产权证明书
2015/06/19 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js