jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】


Posted in Javascript onMarch 03, 2017

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

1、实现源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>FusionCharts2D饼图</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: 'pie2d',
            renderAt: 'pie2D',
            width: '1350',
            height: '650',
            dataFormat: 'json',
            dataSource: {
              "chart": {
                "caption": "三水点靠木统计2016年每个季度的收入比例",
                "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="pie2D"></div>
  </body>
</html>

2、实现效果图:

jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】

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

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

Javascript 相关文章推荐
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 #Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 #Javascript
js实现二级导航功能
Mar 03 #Javascript
js实现简单的获取验证码按钮效果
Mar 03 #Javascript
jQuery获取Table某列的值(推荐)
Mar 03 #Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 #Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
pandas数据集的端到端处理
2019/02/18 Python
Python3中的bytes和str类型详解
2019/05/02 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python 如何在字符串中插入变量
2020/08/01 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
目标责任书范本
2014/04/16 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
团日活动总结模板
2014/06/25 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers