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

首页 > JavaScript

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

51自学网 http://www.51zixue.net

jQuery,插件,FusionCharts,2D,柱状图

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery,插件,FusionCharts,2D,柱状图　

上一篇：jQuery在header中设置请求信息的方法下一篇：Vue.js 2.0中select级联下拉框实例