编程 Javascript

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程序设计有所帮助。

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

- Author -

翱翔天地

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

Javascript 相关文章推荐

javascript 检测浏览器类型和版本的代码

Sep 15 Javascript

JavaScript Object的extend是一个常用的功能

Dec 02 Javascript

JS获取图片实际宽高及根据图片大小进行自适应

Aug 11 Javascript

thinkphp中常用的系统常量和系统变量

Mar 05 Javascript

纯javascript实现的小游戏《Flappy Pig》实例

Jul 27 Javascript

JavaScript取得键盘按下方向键是哪个的方法

Aug 04 Javascript

JavaScript 闭包详细介绍

Sep 28 Javascript

js浏览器html5表单验证

Oct 17 Javascript

jQuery修改DOM结构_动力节点Java学院整理

Jul 05 jQuery

手机注册发送验证码倒计时的简单实例

Nov 15 Javascript

webpack打包并将文件加载到指定的位置方法

Feb 22 Javascript

Angular使用Restful的增删改

Dec 28 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中利用XML技术构造远程服务(下)

2006/10/09 PHP

php数据库抽象层 PDO

2011/05/07 PHP

php设计模式 Factory(工厂模式)

2011/06/26 PHP

PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法

2014/06/26 PHP

composer.lock文件的作用

2016/02/03 PHP

PHP AjaxForm提交图片上传并显示图片源码

2016/11/29 PHP

php输出控制函数和输出函数生成静态页面

2019/06/27 PHP

使用onbeforeunload属性后的副作用

2007/03/08 Javascript

Js中获取frames中的元素示例代码

2013/07/30 Javascript

jquery插件jquery倒计时插件分享

2013/12/27 Javascript

js设置文本框中焦点位置在最后的示例代码(简单实用)

2014/03/04 Javascript

javascript实现10个球随机运动、碰撞实例详解

2015/07/08 Javascript

JavaScript接口的实现三种方式(推荐)

2016/06/14 Javascript

JS判断非空至少输入两个字符的简单实现方法

2017/06/23 Javascript

Node实战之不同环境下配置文件使用教程

2018/01/02 Javascript

解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题

2018/08/30 Javascript

js的继承方法小结（prototype、call、apply）（推荐）

2019/04/17 Javascript

微信小程序实现弹出菜单动画

2019/06/21 Javascript

微信小程序sessionid不一致问题解决

2019/08/30 Javascript

Vue.js自定义指令学习使用详解

2019/10/19 Javascript

Python写的PHPMyAdmin暴力破解工具代码

2014/08/06 Python

Python输出各行命令详解

2018/02/01 Python

python3应用windows api对后台程序窗口及桌面截图并保存的方法

2019/08/27 Python

python实现大学人员管理系统

2019/10/25 Python

Pytorch中.new()的作用详解

2020/02/18 Python

Python3 selenium 实现QQ群接龙自动化功能

2020/04/17 Python

意大利大型购物中心：Oliviero.it

2017/10/19 全球购物

劳动竞赛活动总结

2014/05/05 职场文书

课程设计的心得体会

2014/09/03 职场文书

工作所在部门证明

2014/09/21 职场文书

2014年军人思想汇报范文

2014/10/12 职场文书

党的群众路线教育实践活动心得体会（乡镇）

2014/11/03 职场文书

大学生实习推荐信

2015/03/27 职场文书

Nginx反向代理学习实例教程

2021/10/24 Servers

python flappy bird小游戏分步实现流程

2022/02/15 Python

win7配置本地ftp服务器的图文教程

2022/08/05 Servers