编程 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 相关文章推荐

制作特殊字的脚本

Jun 26 Javascript

2010年最佳jQuery插件整理

Dec 06 Javascript

js或者jquery判断图片是否加载完成实现代码

Mar 20 Javascript

用html+css+js实现的一个简单的图片切换特效

May 28 Javascript

一个获取第n个元素节点的js函数

Sep 02 Javascript

JavaScript中通过prototype属性共享属性和方法的技巧实例

Mar 13 Javascript

JS动态添加iframe的代码

Sep 14 Javascript

javascript电商网站抢购倒计时效果实现

Nov 19 Javascript

JS实现动态增加和删除li标签行的实例代码

Oct 16 Javascript

vue 中 beforeRouteEnter 死循环的问题

Apr 23 Javascript

详解vue-cli3多页应用改造

Jun 04 Javascript

mpvue微信小程序开发之实现一个弹幕评论

Nov 24 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初学者头疼问题总结

2006/07/08 PHP

php中spl_autoload详解

2014/10/17 PHP

php实现事件监听与触发的方法

2014/11/21 PHP

PIGCMS 如何关闭聊天机器人

2015/02/12 PHP

PHP引用返回用法示例

2016/05/28 PHP

php中final关键字用法分析

2016/12/07 PHP

Thinkphp 框架扩展之标签库驱动原理与用法分析

2020/04/23 PHP

jquery ajax提交表单数据的两种实现方法

2010/04/29 Javascript

javascript数组去重3种方法的性能测试与比较

2013/03/26 Javascript

js AppendChild与insertBefore用法详细对比

2013/12/16 Javascript

28个常用JavaScript方法集锦

2015/01/14 Javascript

JS烟花背景效果实现方法

2015/03/03 Javascript

老司机带你解读jQuery插件开发流程

2016/05/16 Javascript

JavaScript中闭包的写法和作用详解

2016/06/29 Javascript

Angular.JS判断复选框checkbox是否选中并实时显示

2016/11/30 Javascript

利用canvas实现的加载动画效果实例代码

2017/07/05 Javascript

ReactNative Image组件使用详解

2017/08/07 Javascript

Bootstrap Table 搜索框和查询功能

2017/11/30 Javascript

使用bootstrap实现下拉框搜索功能的实例讲解

2018/08/10 Javascript

Jquery滑动门/tab切换实现方法完整示例

2020/06/05 jQuery

JavaScript Image对象实现原理实例解析

2020/08/26 Javascript

[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典

2018/12/17 DOTA

[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16

2019/08/19 DOTA

Python中使用bidict模块双向字典结构的奇技淫巧

2016/07/12 Python

Python 实现数据库(SQL)更新脚本的生成方法

2017/07/09 Python

python爬虫获取京东手机图片的图文教程

2017/12/29 Python

Jupyter中直接显示Matplotlib的图形方法

2018/05/24 Python

Django1.9 加载通过ImageField上传的图片方法

2018/05/25 Python

Pycharm新手使用教程(图文详解)

2020/09/17 Python

Python中生成ndarray实例讲解

2021/02/22 Python

雪花秀美国官方网站：韩国著名草本护肤化妆品品牌

2016/10/19 全球购物

生育关怀行动实施方案

2014/03/26 职场文书

团委竞选演讲稿

2014/04/24 职场文书

辞职信格式范文

2015/05/13 职场文书

导游词之丽江普济寺

2019/10/22 职场文书

golang 实用库gotable的具体使用

2021/07/01 Golang