编程 Javascript

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源码下载】

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

由浅到深了解JavaScript类

Sep 08 Javascript

JS控件的生命周期介绍

Oct 22 Javascript

jQuery性能优化28条建议你值得借鉴

Feb 16 Javascript

jQuery 三击事件实现代码

Sep 11 Javascript

AngularJS基础知识笔记之过滤器

May 10 Javascript

js实现将json数组显示前台table中

Jan 10 Javascript

基于vue.js无缝滚动效果

Jan 25 Javascript

Vue之Vue.set动态新增对象属性方法

Feb 23 Javascript

iphone刘海屏页面适配方法

May 07 Javascript

vue+vant使用图片预览功能ImagePreview的问题解决

Apr 10 Javascript

JavaScript交换变量常用4种方法解析

Sep 02 Javascript

微信小程序实现倒计时功能

Nov 19 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