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 相关文章推荐
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
微信小程序模板template简单用法示例
Dec 04 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
改造一台复古桌面收音机
2021/03/02 无线电
php程序之die调试法 快速解决错误
2009/09/17 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
看了就知道什么是JSON
2007/12/09 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python抓取百度首页的方法
2015/05/19 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python sorted对list和dict排序
2020/06/09 Python
想学画画?python满足你!
2020/12/24 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
总经理职责范文
2013/11/08 职场文书
5s推行计划书
2014/05/06 职场文书
经典团队口号
2014/06/06 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技