在MyEclipse下用FusionCharts制作2D条状图
1、第一步，新建一个Web项目，并在WebRoot下新建一个jsp文件夹，在该文件夹下新建一个jsp页面“bar2D.jsp”，如下图所示：
2、第二步，在“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>
如下图所示：
3、第三步，在页面中的<body></body>中添加条状图容器
<div style="text-align: center; vertical-align: middle;">
<div id="bar2D"></div>
</div>
如下图所示：
4、第四步，在jsp文件下新建data文件夹，并在该文件夹下新建一个XML文件“bar2D.xml”，如下图所示：
5、第五步，给“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>
如下图所示：
