本文实例讲述了jQuery插件FusionCharts绘制的2D条状图效果。分享给大家供大家参考,具体如下:
1、设计思路
(1)了解条状图的一些特性和共性,掌握其特性;
(2)根据FusionCharts设计条理,设置静态页面和数据源;
(3)引入条状图,设置其属性。
2、设计步骤
(1)设计生成条状图的脚本
$(function(){ var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" ); bar2D.setXMLUrl("bar2D.xml"); bar2D.render("bar2DChart"); });
(2)设计数据源
<?xml version="1.0" encoding="UTF-8"?> <chart caption='(haodaima.com统计)2016年动物饲养量' xAxisName='动物名称' yAxisName='饲养量' showValues='1' baseFontSize='12' baseFontColor='#A45454' dashed='1' numDivLines='40' divLineColor='#0000FF' divLineThickness='1' divLineAlpha='50' divLineIsDashed='1' divLineDashLen='2' formatNumber='1' scaleRecursively='1' outCnvBaseFont='#456454' outCnvBaseFontSize='16' outCnvBaseFontColor='#00FF00' showToolTip='1' toolTipBgColor='#565677' toolTipBorderColor='#CCCCCC' showToolTipShadow='1' chartLeftMargin='5' showLabel='1'> <set label='猪' value='9856456454' /> <set label='牛' value='8754545554' /> <set label='羊' value='5784554458' /> <set label='兔' value='451545554' /> <set label='鸡' value='7989565666' /> <vLine color='FF5904' thickness='2' dashed='1' showLabelBorder='1' labelVAlign='middle' labelHAlign='center'/> <set label='鸭' value='5613265666' /> <set label='鹅' value='784545555' /> <set label='蛇' value='45412121' /> <set label='蛙' value='656521' /> <set label='鱼' value='7854656666' /> </chart>
(3)引入FusionCharts条状图
<div id="bar2DChart"></div>
3、完整实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts 2D条状图</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> <style type="text/css"> body{ width:98%; height:100%; font-size:12px; } #bar2DChart{ width:100%; } </style> <script type="text/javascript"> $(function(){ var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" ); bar2D.setXMLUrl("bar2D.xml"); bar2D.render("bar2DChart"); }); </script> </head> <body> <div id="bar2DChart"></div> </body> </html>
4、运行效果图:
附:完整实例代码点击此处本站下载。
注:该源码需要放到服务器环境下运行!否则无法加载xml文件数据。
希望本文所述对大家jQuery程序设计有所帮助。
到此这篇关于jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】就介绍到这了。为目标,晚卧夜半,梦别星辰,敛神养气,以备全力以赴!更多相关jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!