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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 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.0对象模型深度探索之绑定
2006/09/05 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP运行模式汇总
2016/11/06 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python中栈的原理及实现方法示例
2019/11/27 Python
详解python 中in 的 用法
2019/12/12 Python
Python多线程获取返回值代码实例
2020/02/17 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
大学生演讲稿范文
2014/01/11 职场文书
幼师自我鉴定
2014/02/01 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
土地租赁协议书
2015/01/29 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
公司回复函格式
2015/07/14 职场文书
2015年科普工作总结
2015/07/23 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS