在MyEclipse下用FusionCharts制作2D条状图
1、第一步，新建一个Web项目，并在WebRoot下新建一个jsp文件夹，在该文件夹下新建一个jsp页面“bar2D.jsp”，如下图所示：
2、第二步，在“bar2D.jsp”页面中，引入需要的JavaScript文件，并创建条状图<script type=&鳎溻趄酃quot;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" encodi荏鱿胫协ng="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>如下图所示：
