本文主要介绍了jQuery插件FusionCharts绘制的2D条状图效果,结合完整实例形式分析了jQuery使用FusionCharts插件绘制2D条状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下,希望能帮助到大家。
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='(jb51.net统计)2016年动物饲养量' xAxisName='动物名称' yAxisName='饲养量' showValues='1' baseFontSize='12' baseFontColor='#A45454' dashed='1' numpLines='40' pLineColor='#0000FF' pLineThickness='1' pLineAlpha='50' pLineIsDashed='1' pLineDashLen='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条状图
<p id="bar2DChart"></p>
3、完整实例代码:
FusionCharts 2D条状图 <p id="bar2DChart"></p>
4、运行效果图:
相关推荐:
以上是jQuery插件FusionCharts绘制的2D条状图效果分享的详细内容。更多信息请关注PHP中文网其他相关文章!