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 相关文章推荐
Javascript中的String对象详谈
Mar 03 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
JSONP基础知识详解
Mar 19 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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
PHPUnit安装及使用示例
2014/10/29 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
List Installed Hot Fixes
2007/06/12 Javascript
javascript实现yield的方法
2013/11/06 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
JavaScript 五大常见函数
2018/03/23 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
django实现类似触发器的功能
2019/11/15 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
简历中求职的个人自我评价
2013/12/03 职场文书
优秀纪检干部材料
2014/08/27 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技