jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2019/6/27 20:58:14
本文主要是介绍jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了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.render("bar2DChart"); });
(2)设计数据源
<?xml version="1.0" encoding="UTF-8"?> <chart caption='(zyiz.net统计)2016年动物饲养量' xAxisName='动物名称' yAxisName='饲养量' showValues='1' baseFontSize='12' baseFontColor='#A45454' dashed='1' numDivLines='40' divLineColor='#0000FF' divLineThickness='1' divLineAlpha='50' divLineIsDashed='1' divLineDashLen='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条状图
<div id="bar2DChart"></div>
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> <div id="bar2DChart"></div> </body> </html>
4、运行效果图:
附:完整实例代码点击此处本站下载。
注:该源码需要放到服务器环境下运行!否则无法加载xml文件数据。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
这篇关于jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-29如何在 Vue2 的 uni-app 项目中使用 npm ?-icode9专业技术文章分享
- 2024-12-29uni-app vue2微信小程序项目在哪里打开终端并使用npm?-icode9专业技术文章分享
- 2024-12-29怎么在 uni-app Vue2 项目中全局引入 Vant Weapp?-icode9专业技术文章分享
- 2024-12-29uni-app vue2微信小程序项目如何在main.js中全局引入vant?-icode9专业技术文章分享
- 2024-12-28Vue入门教程:从零开始搭建第一个Vue项目
- 2024-12-28Vue CLI入门指南:快速搭建Vue项目
- 2024-12-28Vue3基础知识入门教程
- 2024-12-28Vue3公共组件开发与使用入门教程
- 2024-12-28Vue CLI学习:新手入门教程
- 2024-12-28Vue CLI学习:轻松入门与实践指南