几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 533 JAVASCRIPT 鼠标
在MyEclipse下用FusionCharts制作2D条状图
来源：互联网
2023-03-16 23:57:35 476
FusionCharts中有一种叫条状图，它的形状跟柱状图很相像，但是又跟柱状图有所不同。柱状图是以横坐标作为x轴，纵坐标为y轴；而条状图是以横坐标作为y轴，纵坐标为x轴。条状图可以根据柱子的高矮作为数据的趋势。现在将讲述怎么利用FusionCharts制作2D条状图，详细步骤如下：
工具/原料
- FusionCharts XT
- MyEclipse2014
- Tomcat 7.0.x
- JDK1.7
- JavaScript
- CSS
- JSP
- 浏览器
- 截图工具
方法/步骤
第一步，新建一个Web项目，并在WebRoot下新建一个jsp文件夹，在该文件夹下新建一个jsp页面“bar2D.jsp”，如下图所示：
第二步，在“bar2D.jsp”页面中，引入需要的JavaScript文件，并创建条状图
script type="text/javascript" src="../fusioncharts/scripts/jquery-1.11.1.js">/script>
script type="text/javascript" src="../fusioncharts/scripts/FusionCharts.js">/script>
script type="text/javascript">
$(function(){
var barChart = new FusionCharts( "../fusioncharts/swf/Bar2D.swf", "barChartId", "1250", "560", "0" );
barChart.setXMLUrl("data/bar2D.xml");
barChart.render("bar2D");
});
/script>
如下图所示：
第三步，在页面中的body>/body>中添加条状图容器
div style="text-align: center; vertical-align: middle;">
div id="bar2D">/div>
/div>
如下图所示：
第四步，在jsp文件下新建data文件夹，并在该文件夹下新建一个XML文件“bar2D.xml”，如下图所示：
第五步，给“bar2D.xml”添加条状图的数据源
?xml version="1.0" encoding="UTF-8"?>
chart caption='2013年月收入' xAxisName='月份' yAxisName='收入' baseFont='微软雅黑'
showValues='0' baseFontSize='12' baseFontColor='#FF0000' outCnvBaseFont='宋体'
outCnvBaseFontSize='14' outCnvBaseFontColor='#00FF00' showToolTip='1'
toolTipBgColor='#CCCCCC' toolTipBorderColor='#000000' showToolTipShadow='1'>
set label='一月' value='895645' />
set label='二月' value='623562' />
set label='三月' value='255989' />
set label='四月' value='356232' />
set label='五月' value='203265' />
set label='六月' value='484545' />
set label='七月' value='895656' />
set label='八月' value='451584' />
set label='九月' value='956566' />
set label='十月' value='656232' />
set label='十一月' value='451212' />
set label='十二月' value='965655' />
/chart>
如下图所示：
注意事项
- 注意引入JS文件路径的正确性
- 注意引入条状图的SWF文件、数据源XML文件以及页面中的容器的ID的正确性
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSSJAVASCRIPT
上一篇：如何利用dojo制作柱状图 下一篇：网页版Lock手式解锁js特效
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 258 JAVASCRIPT
- 详细阅读