jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
本文实例讲述了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: '(jb51.net)对数轴饼图' }, 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相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src=&q
-
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D柱状图.折线图和饼图的组合图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图和饼图的组合图</title> <script type="text/javascript"
-
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts实现的2D回归直线散点效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts之2D回归直线的散点</title> <script type="text/javascript" src="js
-
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制的基本折线图效果.分享给大家供大家参考,具体如下: 1. 实例源码: <!DOCTYPE html> <html> <head> <title>HighCharts基本折线图</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
-
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制的2D堆柱状图效果.分享给大家供大家参考,具体如下: 1.HighCharts之2D堆柱状图源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆柱状图</title> <script type="text/javascript" src
-
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D圆环图</title> <script type="text/javascript" src="js/jquery-
-
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D柱状图.折线图的组合双轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合双轴图</title> <script type="text/javascript"
-
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D半圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D半圆环图</title> <script type="text/javascript" src="js/jquer
-
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D带有Legend的饼图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带有Legend的饼图</title> <script type="text/javascript" src=
-
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
本文实例讲述了jQuery插件HighCharts实现气泡图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 气泡图</title> <script type="text/javascript" src="js/jquery-1.7.
-
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts实现2D柱状图.折线图的组合多轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合多轴图</title> <script type="text/javascript"
-
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D金字塔图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D金字塔分布图</title> <script type="text/javascript" src="js/jqu
随机推荐
- nginx配置React静态页面的方法教程
- 正则表达式详解
- C# 视频播放类
- Git 常用命令整理
- JS基于面向对象实现的拖拽功能示例
- Windows Server 2016 IIS10 设置HTTPS HTTP/2 并跑分到 A+
- 纯JS实现动态时间显示代码
- PHP多维数组遍历方法(2种实现方法)
- python快速排序代码实例
- Android中3种全屏方法及3种去掉标题栏的方法
- PHP中的替代语法简介
- PHPExcel在linux环境下导出报500错误的解决方法
- jsp中获取状态怎么写(两种实现方式)
- Java 守护线程_动力节点Java学院整理
- 模糊查询
- jquery入门—数据删除与隔行变色以及图片预览
- 修改.htaccess实现子目录绑定示例分享
- 提高C程序效率的10种有效方法
- Android实现延迟的几种方法小结
- react高阶组件经典应用之权限控制详解