您的当前位置：首页 jQuery插件FusionCharts绘制的2D条状图效果分享

jQuery插件FusionCharts绘制的2D条状图效果分享

来源：微智科技网

本文主要介绍了jQuery插件FusionCharts绘制的2D条状图效果,结合完整实例形式分析了jQuery使用FusionCharts插件绘制2D条状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下，希望能帮助到大家。

1、设计思路

（1）了解条状图的一些特性和共性，掌握其特性；

（2）根据FusionCharts设计条理，设置静态页面和数据源；

（3）引入条状图，设置其属性。

2、设计步骤

（1）设计生成条状图的脚本

（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='#4554' outCnvBaseFontSize='16' outCnvBaseFontColor='#00FF00' showToolTip='1'
 toolTipBgColor='#565677' toolTipBorderColor='#CCCCCC' showToolTipShadow='1' chartLeftMargin='5' showLabel='1'>
 <set label='猪' value='985554' />
 <set label='牛' value='8754545554' />
 <set label='羊' value='5784554458' />
 <set label='兔' value='451545554' />
 <set label='鸡' value='79565666' />
 <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、完整实例代码：

4、运行效果图：