jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】


Posted in Javascript onMarch 03, 2017

本文实例讲述了jQuery插件FusionCharts绘制的3D饼状图效果。分享给大家供大家参考,具体如下:

1、实现源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>最新版FusionCharts3D饼图</title>
    <script src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/fusioncharts.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 98%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
    </style>
    <script>
      $(document).ready(function(){
        FusionCharts.ready(function () {
          var ageGroupChart = new FusionCharts({
            type: 'pie3d',
            renderAt: 'pie3D',
            width: '1350',
            height: '650',
            dataFormat: 'json',
            dataSource: {
              "chart": {
                "caption": "统计2015年每个季度的收入比例",
                "subCaption": "",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "0",
                "showPercentValues": "1",
                "showPercentInTooltip": "0",
                "decimals": "2",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "showHoverEffect":"1",
                "showLegend": "1",
                "legendBgColor": "#ffffff",
                "legendBorderAlpha": '0',
                "legendShadow": '0',
                "legendItemFontSize": '10',
                "legendItemFontColor": '#666666'
              },
              "data": [
                {
                  "label": "第一季度",
                  "value": "255040"
                },
                {
                  "label": "第二季度",
                  "value": "689545"
                },
                {
                  "label": "第三季度",
                  "value": "784595"
                },
                {
                  "label": "第四季度",
                  "value": "325848"
                }
              ]
            }
          }).render();
        });
      });
    </script>
  </head>
  <body>
    <div id="pie3D"></div>
  </body>
</html>

2、实现效果图:

jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
js实现二级导航功能
Mar 03 #Javascript
js实现简单的获取验证码按钮效果
Mar 03 #Javascript
jQuery获取Table某列的值(推荐)
Mar 03 #Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 #Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
You might like
php下使用以下代码连接并测试
2008/04/09 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
python中xrange和range的区别
2014/05/13 Python
keras 多任务多loss实例
2020/06/22 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
校园活动策划书范文
2014/01/10 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
小爸爸观后感
2015/06/15 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
浅谈python数据类型及其操作
2021/05/25 Python
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
python 中的jieba分词库
2021/11/23 Python