jQuery插件FusionCharts绘制的2D条状图效果【附演示源码】

本文实例讲述了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。渲染(“bar2d图表”)；});(2)设计数据源

？可扩展标记语言版本='1.0 '编码='UTF-8 '？图表标题='(jb51.net统计)2016年动物饲养量xAxisName='动物名称' yAxisName='饲养量show values=' 1 ' baseFontSize=' 12 ' baseFontColor=' # a 45454 '虚线=' 1 ' numDivLines=' 40 ' divLineColor=' # 0000 ff ' divlinething=' 1 ' divlinelpha=' 50 ' divLineIsDashed=' 1 ' divLineDashLen=' 2 '格式号=' 1 ' scalerly=' 1 ' outnvbasefont=' # 456454 ' outnvbasefontsize=' 16 ' outnvbasefontcolor猪value='9856456454'/设置标签='牛value='8754545554'/set label='羊value='5784554458'/set label='兔value='451545554'/set label='鸡值=' 7989565666 '/VLine color=' FF5904 '厚度=' 2 '虚线=' 1 ' showlabelboard=' 1 ' labelvalin=' middle ' label align=' center '/set label='鸭value='5613265666'/set label='鹅value='784545555'/set label='蛇value='45412121'/set label='蛙value='656521'/set label='鱼值=' 7854656666 '/图表(3)引入FusionCharts条状图

div id='bar2DChart'/div3，完整实例代码：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title fusion charts 2D条状图/title脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' text/JAVAScript ' src=' http : fusion charts/fusion charts。js '/脚本样式类型=' text/CSS '正文{ width :98 }；高度：100%;font-size :12 px} #条形图2 {宽度：100%；}/style脚本类型=' text/JavaScript ' $(function(){ var bar2D=new FusionCharts(' FusionCharts/bar2D。swf '，' myChartId '，' 100% '，' 540 '，' 0 ')；bar2d。setxmlurl(' bar2d。XML ')；bar2d。渲染(“bar2d图表”)；});/script/head body div id=' Bar2D chart '/div/body/html 4、运行效果图：

附：完整实例代码点击此处本站下载。

注：该源码需要放到服务器环境下运行！否则无法加载可扩展标记语言文件数据。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。