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: "arial rounded mt bold";
        font-size: 12px;
      }
    </style>
    <script>
      $(document).ready(function(){
        FusionCharts.ready(function () {
          var column3DChart = new FusionCharts({
            type: 'column3d',
            renderAt: 'column3D',
            width: '1350',
            height: '650',
            dataFormat: 'json',
            dataSource: {
              "chart": {
                "caption": "(三水点靠木)一年收入统计",
                "xAxisName": "月份",
                "yAxisName": "收入明细",
                "paletteColors": "#0075c2",
                "valueFontColor": "#000000",
                "baseFont": "Helvetica Neue,Arial",
                "captionFontSize": "16",
                "subcaptionFontSize": "16",
                "subcaptionFontBold": "1",
                "placeValuesInside": "0",
                "rotateValues": "1",
                "showShadow": "0",
                "divlineColor": "#999999",
                "divLineIsDashed": "1",
                "divlineThickness": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "canvasBgColor": "#ffffff"
              },
              "data": [
                {
                  "label": "(三水点靠木)一月",
                  "value": "3689"
                },
                {
                  "label": "(三水点靠木)二月",
                  "value": "5874"
                },
                {
                  "label": "(三水点靠木)三月",
                  "value": "4512"
                },
                {
                  "label": "(三水点靠木)四月",
                  "value": "6785"
                },
                {
                  "label": "(三水点靠木)五月",
                  "value": "1568"
                },
                {
                  "label": "(三水点靠木)六月",
                  "value": "2745"
                },
                {
                  "label": "(三水点靠木)七月",
                  "value": "4758"
                },
                {
                  "label": "(三水点靠木)八月",
                  "value": "9652"
                },
                {
                  "label": "(三水点靠木)九月",
                  "value": "3425"
                },
                {
                  "label": "(三水点靠木)十月",
                  "value": "2014"
                },
                {
                  "label": "(三水点靠木)十一月",
                  "value": "3652"
                },
                {
                  "label": "(三水点靠木)十二月",
                  "value": "7421"
                }
              ]
            }
          });
          column3DChart.render();
        });
      });
    </script>
  </head>
  <body>
    <div id="column3D"></div>
  </body>
</html>

2、实现效果图:

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

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

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

Javascript 相关文章推荐
js中window.open()的所有参数详细解析
Jan 09 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
基于node实现websocket协议
Apr 25 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 #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
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php array_walk() 数组函数
2011/07/12 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP 错误处理机制
2015/07/06 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python模拟实现分发扑克牌
2020/04/22 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
群胜软件Java笔试题
2012/09/29 面试题
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
电台实习生求职信
2014/02/25 职场文书
高三毕业寄语
2014/04/10 职场文书
党委班子对照检查材料
2014/08/19 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
php中pcntl_fork详解
2021/04/01 PHP