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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
href下载文件根据id取url并下载
May 28 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
vue实现动态数据绑定
Apr 28 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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 柱状图实现代码
2009/12/04 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python实现定时播放mp3
2015/03/29 Python
使用Python生成url短链接的方法
2015/05/04 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
jupyter notebook实现显示行号
2020/04/13 Python
想学画画?python满足你!
2020/12/24 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
品质主管的岗位职责
2013/12/04 职场文书
社区志愿者培训方案
2014/06/10 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
上诉状格式
2015/05/23 职场文书
党支部考察意见范文
2015/06/02 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
python基础之函数的定义和调用
2021/10/24 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技