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自定义button按钮的几种方法
Jun 11 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
微信小程序icon组件使用详解
Jan 31 Javascript
JS严格模式原理与用法实例分析
Apr 27 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
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
js 操作css实现代码
2009/06/11 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
深入理解Python对Json的解析
2017/02/14 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
基于Django统计博客文章阅读量
2019/10/29 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
写给保洁员表扬信
2014/01/08 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
仓库管理计划书
2014/05/04 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
社区志愿者活动总结
2014/06/26 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang