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 编程笔记 无名函数
Jun 28 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
js面向对象的写法
Feb 19 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
JavaScript实现打字游戏
Feb 19 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
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
js form action动态修改方法
2008/11/04 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
浅析node.js中close事件
2014/11/26 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python多进程共享变量
2016/04/06 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
九年级英语教学反思
2014/01/31 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
兵马俑导游词
2015/02/02 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis