FusionChart 2D面积图

niulanshan

浏览: 563983 次

最近访客更多访客>>

扶起之秀

qijojo

qy86615069

yungaoyue2005

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1540)

社区版块

存档分类

1、创建一个web工程，命名为chart；

2、在WebContent目录下新建一个fusionchart文件夹，将FusionCharts.js拷到该目录下；

3、同样，将jquery-1.10.1.js和Area2D.swf也拷到WebContent目录下；

4、然后在WebContent目录下，新建一个JSP文件，取名为Area2D.jsp;

Area2D.jsp的源码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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>FushionChart 2D 面积图</title>
<script type="text/javascript" src="fusionchart/FusionCharts.js"></script>
<script type="text/javascript" src="fusionchart/jquery-1.10.1.js"></script>
<style type="text/css">
   body{
     width:100%;
     height:100%;
     font-size: 12px;
     background: silver;
   }
   fieldset{
     width:100%;
     height:100%;
     font-size: 12px;
   }
</style>
<script type="text/javascript">
   $(function(){
	   var areaChart = new FusionCharts( "fusionchart/Area2D.swf", "areaChart", "100%", "100%", "0", "1");
	   areaChart.setXMLUrl("Area2D.xml");
	   areaChart.render("Area2D"); 
   });
</script>
</head>
<body>
  <fieldset>
      <legend>2D面积图</legend>
      <div id="Area2D"></div>
  </fieldset>
</body>
</html>

5、同理，在该目录下新建一个Area2D.xml文件，源码如下：

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='张华2012年月收入' xAxisName='月份' yAxisName='收入' anchorSides='3' 
       showValues= '1' bgColor='7FFF00' drawAnchors='1' baseFontSize='12'
       numDivLines='8' divLineColor='F4A460' zeroPlaneColor='008080' 
       anchorBgColor='FFF000' showPlotBorder='1' plotBorderColor='FFE4B5'
       canvasBgColor='5EA294'>

 <set label='一月' value='3250' color='FF0000'/>
 <set label='二月' value='5650' color='FF0000'/>
 <set label='三月' value='6200' color='FF0000'/>
 <set label='四月' value='4500' color='FF0000'/>
 <set label='五月' value='6100' color='FF0000'/>
 <set label='六月' value='3134' color='FF0000'/>
 <set label='七月' value='4578' color='FF0000'/>
 <set label='八月' value='8745' color='FF0000'/>
 <set label='九月' value='2356' color='FF0000'/>
 <set label='十月' value='4580' color='FF0000'/>
 <set label='十一月' value='6500' color='FF0000'/>
 <set label='十二月' value='7840' color='FF0000'/>

</chart>

6、运行web项目，结果如下图：