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 相关文章推荐
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
整理一下常见的IE错误
Nov 18 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 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版(5)
2006/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php MessagePack介绍
2013/10/06 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python