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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
解析js如何获取css样式
Dec 11 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
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读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
jquery JSON的解析方式
2009/07/25 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
vue项目实战总结篇
2018/02/11 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
python搜索指定目录的方法
2015/04/29 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python的命名规则知识点总结
2019/10/04 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
自我鉴定范文300字
2013/10/01 职场文书
企业总经理职责
2014/02/02 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
会议欢迎标语
2014/06/30 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
mysql序号rownum行号实现方式
2022/12/24 MySQL