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(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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
关于时间计算的结总
2006/12/06 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP attributes()函数讲解
2019/02/03 PHP
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
详解Python if-elif-else知识点
2018/06/11 Python
TensorFlow实现模型评估
2018/09/07 Python
python实现两张图片的像素融合
2019/02/23 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
三好学生自我鉴定
2013/12/17 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
酒店员工检讨书
2014/02/18 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
新教师岗前培训方案
2014/06/05 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers