首页 >web前端 >js教程 >jQuery插件FusionCharts绘制的2D条状图效果分享

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

小云云原创: 2018-01-12 09:37:421649浏览

本文主要介绍了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=&#39;(jb51.net统计)2016年动物饲养量&#39; xAxisName=&#39;动物名称&#39; yAxisName=&#39;饲养量&#39; showValues=&#39;1&#39; baseFontSize=&#39;12&#39; baseFontColor=&#39;#A45454&#39;
    dashed=&#39;1&#39; numpLines=&#39;40&#39; pLineColor=&#39;#0000FF&#39; pLineThickness=&#39;1&#39; pLineAlpha=&#39;50&#39; pLineIsDashed=&#39;1&#39; pLineDashLen=&#39;2&#39;
    formatNumber=&#39;1&#39; scaleRecursively=&#39;1&#39; outCnvBaseFont=&#39;#456454&#39; outCnvBaseFontSize=&#39;16&#39; outCnvBaseFontColor=&#39;#00FF00&#39; showToolTip=&#39;1&#39;
    toolTipBgColor=&#39;#565677&#39; toolTipBorderColor=&#39;#CCCCCC&#39; showToolTipShadow=&#39;1&#39; chartLeftMargin=&#39;5&#39; showLabel=&#39;1&#39;>
  <set label=&#39;猪&#39; value=&#39;9856456454&#39; />
  <set label=&#39;牛&#39; value=&#39;8754545554&#39; />
  <set label=&#39;羊&#39; value=&#39;5784554458&#39; />
  <set label=&#39;兔&#39; value=&#39;451545554&#39; />
  <set label=&#39;鸡&#39; value=&#39;7989565666&#39; />
  <vLine color=&#39;FF5904&#39; thickness=&#39;2&#39; dashed=&#39;1&#39; showLabelBorder=&#39;1&#39; labelVAlign=&#39;middle&#39; labelHAlign=&#39;center&#39;/>
  <set label=&#39;鸭&#39; value=&#39;5613265666&#39; />
  <set label=&#39;鹅&#39; value=&#39;784545555&#39; />
  <set label=&#39;蛇&#39; value=&#39;45412121&#39; />
  <set label=&#39;蛙&#39; value=&#39;656521&#39; />
  <set label=&#39;鱼&#39; value=&#39;7854656666&#39; />
</chart>

（3）引入FusionCharts条状图

<p id="bar2DChart"></p>

3、完整实例代码：





FusionCharts 2D条状图






  <p id="bar2DChart"></p>

4、运行效果图：

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

相关文章