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 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
javascript数组的使用
2013/03/28 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
python能在浏览器能运行吗
2020/06/17 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
班级文化标语
2014/06/23 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
实验心得体会范文
2016/01/25 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电