AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
jQuery,插件,FusionCharts,3D,柱状图

本文实例讲述了jQuery插件FusionCharts实现的3D柱状图效果。分享给大家供大家参考,具体如下:

1、实现源码:

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>FusionCharts3D柱状图</title>    <script src="js/jquery-1.4.2.min.js"></script>    <script type="text/javascript" src="js/fusioncharts.js" ></script>    <style>      body,html{        width:99%;        height: 98%;        font-family: "arial rounded mt bold";        font-size: 12px;      }    </style>    <script>      $(document).ready(function(){        FusionCharts.ready(function () {          var column3DChart = new FusionCharts({            type: 'column3d',            renderAt: 'column3D',            width: '1350',            height: '650',            dataFormat: 'json',            dataSource: {              "chart": {                "caption": "(wanshiok.com)一年收入统计",                "xAxisName": "月份",                "yAxisName": "收入明细",                "paletteColors": "#0075c2",                "valueFontColor": "#000000",                "baseFont": "Helvetica Neue,Arial",                "captionFontSize": "16",                "subcaptionFontSize": "16",                "subcaptionFontBold": "1",                "placeValuesInside": "0",                "rotateValues": "1",                "showShadow": "0",                "divlineColor": "#999999",                "divLineIsDashed": "1",                "divlineThickness": "1",                "divLineDashLen": "1",                "divLineGapLen": "1",                "canvasBgColor": "#ffffff"              },              "data": [                {                  "label": "(wanshiok.com)一月",                  "value": "3689"                },                {                  "label": "(wanshiok.com)二月",                  "value": "5874"                },                {                  "label": "(wanshiok.com)三月",                  "value": "4512"                },                {                  "label": "(wanshiok.com)四月",                  "value": "6785"                },                {                  "label": "(wanshiok.com)五月",                  "value": "1568"                },                {                  "label": "(wanshiok.com)六月",                  "value": "2745"                },                {                  "label": "(wanshiok.com)七月",                  "value": "4758"                },                {                  "label": "(wanshiok.com)八月",                  "value": "9652"                },                {                  "label": "(wanshiok.com)九月",                  "value": "3425"                },                {                  "label": "(wanshiok.com)十月",                  "value": "2014"                },                {                  "label": "(wanshiok.com)十一月",                  "value": "3652"                },                {                  "label": "(wanshiok.com)十二月",                  "value": "7421"                }              ]            }          });          column3DChart.render();        });      });    </script>  </head>  <body>    <div id="column3D"></div>  </body></html>

2、实现效果图:

附:完整实例代码点击此处本站下载

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

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


jQuery,插件,FusionCharts,3D,柱状图  
上一篇:jQuery控制元素隐藏和显示  下一篇:jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】