编程 Javascript

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程序设计有所帮助。

jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

利用JS自动打开页面上链接的实现代码

Sep 25 Javascript

ajax不执行success回调而是执行了error回调

Dec 10 Javascript

jquery在IE、FF浏览器的差别详细探讨

Apr 28 Javascript

jquery实现顶部向右伸缩的导航区域代码

Sep 02 Javascript

jQuery设置Cookie及删除Cookie实例分析

Apr 15 Javascript

深入浅析knockout源码分析之订阅

Jul 12 Javascript

vue实现通讯录功能

Jul 14 Javascript

微信小程序下拉刷新及上拉加载原理解析

Nov 06 Javascript

Vue中keep-alive组件作用详解

Feb 04 Javascript

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

Jul 18 Javascript

canvas绘制折线路径动画实现

May 12 Javascript

vue3使用vue-router的完整步骤记录

Jun 20 Vue.js

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