首页 > 代码库 > 用FusionChartsFree做饼状图、柱状图、折线图的实例

用FusionChartsFree做饼状图、柱状图、折线图的实例

2024-07-20 13:23:39   225人阅读

2011年12月05日 - lishirong - The CTO of LiShirong

 

2011年12月05日 - lishirong - The CTO of LiShirong

 

2011年12月05日 - lishirong - The CTO of LiShirong
1.先来看看要进行表现的页面：myChart.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>
<title>Fusion Chart Test</title>
<link rel="stylesheet" href="http://www.mamicode.com/Contents/Style.css" type="text/css" />
<script src="http://www.mamicode.com/js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.mamicode.com/js/FusionCharts.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  // do something here
     $.ajax({
         type:"POST",
         url:"../test",   //请求路径 请求Action(继承DispatcherAction)中的login方法
         success: function(responseText){
        // alert(responseText);
             //根据你所需要的图形类型选择不同的swf，如3d柱状图为FCF_Column3D.swf，2d饼状图为FCF_Pie2D.swf
       var chart = new FusionCharts("../Charts/FCF_Line.swf", "ChartId", "600", "350");
       chart.setDataXML(responseText);
       chart.render("chartdiv");
      }
     });
 });
</script>
</head>
<body bgcolor="#ffffff">
<div align="center">Fusion Charts Free</div>
 <div id="chartdiv" align="center"></div>
</body>
</html>
 
注：以上需要引入需要的js和css，如jquery.js,FusionCharts.js,style.css,Charts文件夹，这其中的大部分都可以在下载的FusionChartsFree中找到。如果只是做简单的从XML中读取数据，那么很简单，参看其中的相关例子即可。
2.来看一下后台返回的数据的格式：Servlet.java
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**  
 * @Title: Servlet.java
 * @Package servlet
 * @Description:
 * @author lzh
 * @date Dec 2, 2011 2:44:51 PM   
 * @version V1.0  
 */
public class Servlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
    this.doPost(request, response);
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
    request.setCharacterEncoding("GBK");
    StringBuffer sb=new StringBuffer();
    sb.append("<graph caption=‘Monthly Unit Sales‘ xAxisName=‘Month‘ yAxisName=‘Units‘ showNames=‘1‘ decimalPrecision=‘2‘ formatNumberScale=‘0‘>");
    sb.append("<set name=‘一月‘ value=http://www.mamicode.com/‘444‘ color=‘CCFFFF‘ hoverText=‘一月,444‘ link=‘http://www.baidu.com‘/>");
    sb.append("<set name=‘二月‘ value=http://www.mamicode.com/‘555‘ color=‘F6BD0F‘/>");
    sb.append("<set name=‘三月‘ value=http://www.mamicode.com/‘671‘ color=‘8BBA00‘ />");
       sb.append("<set name=‘四月‘ value=http://www.mamicode.com/‘494‘ color=‘FF8E46‘/>");
       sb.append("<set name=‘五月‘ value=http://www.mamicode.com/‘761‘ color=‘008E8E‘/>");
       sb.append("<set name=‘六月‘ value=http://www.mamicode.com/‘960‘ color=‘D64646‘/>");
       sb.append("<set name=‘七月‘ value=http://www.mamicode.com/‘629‘ color=‘8E468E‘/>");
       sb.append("<set name=‘八月‘ value=http://www.mamicode.com/‘622‘ color=‘588526‘/>");
       sb.append("<set name=‘九月‘ value=http://www.mamicode.com/‘376‘ color=‘B3AA00‘/>");
       sb.append("<set name=‘十月‘ value=http://www.mamicode.com/‘494‘ color=‘008ED6‘/>");
       sb.append("<set name=‘十一月‘ value=http://www.mamicode.com/‘761‘ color=‘9D080D‘/>");
       sb.append("<set name=‘十二月‘ value=http://www.mamicode.com/‘960‘ color=‘A186BE‘/>");
       sb.append("</graph>");
       response.setCharacterEncoding("UTF-8");
       System.out.println(sb.toString());
       response.getWriter().print(sb.toString());
 }
}
3.如果只是读xml文件，那么在表现页面myChart中，将responseText替换为相应的xml文件即可。xml的格式如下：
<graph caption=‘‘ subcaption=‘‘ hovercapbg=‘FFECAA‘ hovercapborder=‘F47E00‘ formatNumberScale=‘0‘ decimalPrecision=‘0‘ showvalues=‘0‘ numdivlines=‘3‘ numVdivlines=‘0‘ yaxisminvalue=http://www.mamicode.com/‘1000‘ ><categories >
<category name=‘2011-08-17 17：20‘ />
<category name=‘2011-08-17 17：25‘ />
<category name=‘2011-08-17 17：30‘ />
<category name=‘2011-08-17 17：35‘ />
<category name=‘2011-08-17 17：40‘ />
<category name=‘2011-08-17 17：45‘ />
<category name=‘2011-08-17 17：50‘ />
</categories>
<dataset seriesName=‘温度‘ color=‘1D8BD1‘ anchorBorderColor=‘1D8BD1‘ anchorBgColor=‘1D8BD1‘>
 <set value=http://www.mamicode.com/‘1327‘ />
 <set value=http://www.mamicode.com/‘1826‘ />
 <set value=http://www.mamicode.com/‘1699‘ />
 <set value=http://www.mamicode.com/‘1511‘ />
 <set value=http://www.mamicode.com/‘1904‘ />
 <set value=http://www.mamicode.com/‘1957‘ />
 <set value=http://www.mamicode.com/‘1296‘ />
 </dataset>
<dataset seriesName=‘湿度‘ color=‘F1683C‘ anchorBorderColor=‘F1683C‘ anchorBgColor=‘F1683C‘>
 <set value=http://www.mamicode.com/‘2042‘ />
 <set value=http://www.mamicode.com/‘3210‘ />
 <set value=http://www.mamicode.com/‘2994‘ />
 <set value=http://www.mamicode.com/‘3115‘ />
 <set value=http://www.mamicode.com/‘2844‘ />
 <set value=http://www.mamicode.com/‘3576‘ />
 <set value=http://www.mamicode.com/‘1862‘ />
</dataset>
<dataset seriesName=‘降水量‘ color=‘2AD62A‘ anchorBorderColor=‘2AD62A‘ anchorBgColor=‘2AD62A‘>
 <set value=http://www.mamicode.com/‘850‘ />
 <set value=http://www.mamicode.com/‘1010‘ />
 <set value=http://www.mamicode.com/‘1116‘ />
 <set value=http://www.mamicode.com/‘1234‘ />
 <set value=http://www.mamicode.com/‘1210‘ />
 <set value=http://www.mamicode.com/‘1054‘ />
 <set value=http://www.mamicode.com/‘802‘ />
</dataset>
<dataset seriesName=‘能见度‘ color=‘DBDC25‘ anchorBorderColor=‘DBDC25‘ anchorBgColor=‘DBDC25‘>
 <set value=http://www.mamicode.com/‘541‘ />
 <set value=http://www.mamicode.com/‘781‘ />
 <set value=http://www.mamicode.com/‘920‘ />
 <set value=http://www.mamicode.com/‘754‘ />
 <set value=http://www.mamicode.com/‘840‘ />
 <set value=http://www.mamicode.com/‘893‘ />
 <set value=http://www.mamicode.com/‘451‘ />
</dataset>

</graph>

用FusionChartsFree做饼状图、柱状图、折线图的实例


联系
我们