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里写一个swing把数据插入数据库
Dec 10 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
stripos函数知识点实例分享
2019/02/11 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python实现bucket排序算法实例分析
2015/05/04 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python实现微信小程序支付功能
2019/07/25 Python
python实现复制文件到指定目录
2019/10/16 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
电大本科自我鉴定
2014/02/05 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书