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 相关文章推荐
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
JavaScript实现切换多张图片
Jan 27 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
php实现求相对时间函数
2015/06/15 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
js实现秒表计时器
2019/12/16 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
python编程实现归并排序
2017/04/14 Python
mac系统安装Python3初体验
2018/01/02 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
俄语专业毕业生推荐信
2013/10/28 职场文书
美德好少年主要事迹
2014/01/29 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
就业协议书范本
2014/10/08 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
周一问候语大全
2015/11/10 职场文书
协议书格式模板
2016/03/24 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android