jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】


Posted in Javascript onMarch 09, 2017

本文实例讲述了jQuery插件HighCharts实现的2D对数饼图效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D对数轴饼图</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">
$(function(){
 $('#logarithmicPieChart').highcharts({
  chart: {
  },
  title: {
   text: '(3water.com)对数轴饼图'
  },
  xAxis: {
   tickInterval: 2
  },
  yAxis: {
   type: 'logarithmic',
   minorTickInterval: 0.5
  },
  tooltip: {
   headerFormat: '<b>{series.name}</b><br />',
   pointFormat: 'x = {point.x}, y = {point.y}'
  },
  series: [{
   data: [1, 3, 9, 27, 81, 243, 729, 2187, 6561, 19683,59049,177147,531441,1594323],
   pointStart: 1
  }]
 });
 });
</script>
</head>
<body>
 <div id="logarithmicPieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】

Javascript 相关文章推荐
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 #Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 #Javascript
js实现年月日表单三级联动
Apr 17 #Javascript
js实现3D图片展示效果
Mar 09 #Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 #Javascript
less简单入门(CSS 预处理语言)
Mar 08 #Javascript
完美实现js选项卡切换效果(二)
Mar 08 #Javascript
You might like
php学习之运算符相关概念
2011/06/09 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
vue生命周期实例小结
2018/08/15 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python del()函数用法
2013/03/24 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python通过socket查询whois的方法
2015/07/18 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python常用运维脚本实例小结
2020/02/14 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
行政人员工作职责
2013/12/05 职场文书
优良学风班总结材料
2014/02/08 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
校外活动方案
2014/08/28 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书