jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
程序员文章站
2022-06-08 22:59:48
本文实例讲述了jquery插件fusioncharts绘制的3d饼状图效果。分享给大家供大家参考,具体如下:
1、实现源码
本文实例讲述了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: "微软雅黑"; font-size: 12px; } </style> <script> $(document).ready(function(){ fusioncharts.ready(function () { var agegroupchart = new fusioncharts({ type: 'pie3d', renderat: 'pie3d', width: '1350', height: '650', dataformat: 'json', datasource: { "chart": { "caption": "统计2015年每个季度的收入比例", "subcaption": "", "palettecolors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000", "bgcolor": "#ffffff", "showborder": "0", "use3dlighting": "0", "showshadow": "0", "enablesmartlabels": "0", "startingangle": "0", "showpercentvalues": "1", "showpercentintooltip": "0", "decimals": "2", "captionfontsize": "14", "subcaptionfontsize": "14", "subcaptionfontbold": "0", "tooltipcolor": "#ffffff", "tooltipborderthickness": "0", "tooltipbgcolor": "#000000", "tooltipbgalpha": "80", "tooltipborderradius": "2", "tooltippadding": "5", "showhovereffect":"1", "showlegend": "1", "legendbgcolor": "#ffffff", "legendborderalpha": '0', "legendshadow": '0', "legenditemfontsize": '10', "legenditemfontcolor": '#666666' }, "data": [ { "label": "第一季度", "value": "255040" }, { "label": "第二季度", "value": "689545" }, { "label": "第三季度", "value": "784595" }, { "label": "第四季度", "value": "325848" } ] } }).render(); }); }); </script> </head> <body> <div id="pie3d"></div> </body> </html>
2、实现效果图:
附:完整实例代码点击此处。
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery常用插件及用法总结》、《jquery中ajax用法总结》、《jquery表格(table)操作技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
推荐阅读
-
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
-
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
-
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】