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


Posted in Javascript onMarch 06, 2017

本文实例讲述了jQuery插件FusionCharts实现的2D柱状图效果。分享给大家供大家参考,具体如下:

1、实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>FusionCharts最新FusionCharts2D柱状图</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <script type="text/javascript" src="FusionCharts/fusioncharts.js" ></script>
    <script>
      FusionCharts.ready(function(){
        var columnChart = new FusionCharts({
          type:"column2d",
          renderAt:"column2D",
          width:"1345",
          height:"620",
          dataSource:{
            "chart":{
              "caption":"月销售量",
              "xAxisName":"月份",
              "yAxisName":"销售量",
              "exportEnabled":"1"
            },
            "data":[
              {
                "label":"1月",
                "value":"120"
              },{
                "label":"2月",
                "value":"230"
              },{
                "label":"3月",
                "value":"654"
              },{
                "label":"4月",
                "value":"454"
              },{
                "label":"5月",
                "value":"323"
              },{
                "label":"6月",
                "value":"640"
              },{
                "label":"7月",
                "value":"431"
              },{
                "label":"8月",
                "value":"809"
              },{
                "label":"9月",
                "value":"345"
              },{
                "label":"10月",
                "value":"430"
              },{
                "label":"11月",
                "value":"870"
              },{
                "label":"12月",
                "value":"670"
              }]
          }
        }).render();
      });
    </script>
  </head>
  <body>
    <div id="column2D"></div>
  </body>
</html>

2、实现效果图:

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

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 #Javascript
jquery获取select,option所有的value和text的实例
Mar 06 #Javascript
Bootstrap按钮组简单实现代码
Mar 06 #Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 #Javascript
Javascript中引用类型传递的知识点小结
Mar 06 #Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 #Javascript
js正则表达式验证表单【完整版】
Mar 06 #Javascript
You might like
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中的Numpy入门教程
2014/04/26 Python
跟老齐学Python之复习if语句
2014/10/02 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python内置模块logging用法实例分析
2018/02/12 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
Linux机考试题
2015/07/17 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
公司授权委托书
2014/04/04 职场文书
小班下学期评语
2014/05/04 职场文书
校园文明标语
2014/06/13 职场文书
科学发展观活动总结
2014/08/28 职场文书
狂人日记读书笔记
2015/06/30 职场文书
餐厅服务员管理制度
2015/08/05 职场文书