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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
前端微信支付js代码
Jul 25 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
javascript异常处理实现原理详解
Feb 17 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
我的论坛源代码(八)
2006/10/09 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
PHP与以太坊交互详解
2018/08/24 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
jQuery select控制插件
2009/08/17 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
python变量的存储原理详解
2019/07/10 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python 实现性别识别
2020/11/21 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
应届生求职推荐信
2013/10/28 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android