jQuery插件FusionCharts绘制的2D条状图效果分享
程序员文章站
2022-05-17 12:29:40
...
本文主要介绍了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、完整实例代码:
<!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> <p id="bar2DChart"></p> </body> </html>
4、运行效果图:
相关推荐:
以上就是jQuery插件FusionCharts绘制的2D条状图效果分享的详细内容,更多请关注其它相关文章!
推荐阅读
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
-
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
-
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
-
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
-
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
-
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
-
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
-
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
-
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】