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 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
基于mysql的论坛(2)
2006/10/09 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
解决python大批量读写.doc文件的问题
2018/05/08 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
JSF界面控制层技术
2013/06/17 面试题
文员个人的求职信范文
2013/09/26 职场文书
汽车检测与维修专业求职信
2013/10/30 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
学期个人自我总结
2015/02/13 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL