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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Document 对象的常用方法
2009/07/31 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
详解Python中heapq模块的用法
2016/06/28 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python函数和模块的使用总结
2019/05/20 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
开国大典观后感
2015/06/04 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL