首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js子页面获取父页面数据示例
May 15 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
JavaScript实现简单进度条效果
Mar 25 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
J2EE面试题(19) SOA面试题(9) 推荐信(292) Delphi面试题(13) 自我鉴定(671) 自荐信(981) Ruby面试题(15) 求职信(1029) Servlet面试题(20) 自我评价(886)
You might like
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
深入讲解PHP的Yii框架中的属性（Property）
2016/03/18 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
详解python 发送邮件实例代码
2016/12/22 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python识别html主要文本框过程解析
2020/02/18 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
大学生自我鉴定
2013/12/08 职场文书
职工运动会邀请函
2014/02/02 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
实习评语大全
2014/04/26 职场文书
多媒体教室标语
2014/06/26 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
KTV员工管理制度
2015/08/06 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL