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

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="../Contents/Style.css" type="text/css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="../js/FusionCharts.js"></script>

注：以上需要引入需要的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='444' color='CCFFFF' hoverText='一月,444' link='http://www.baidu.com'/>");
    sb.append("<set name='二月' value='555' color='F6BD0F'/>");
    sb.append("<set name='三月' value='671' color='8BBA00' />");
       sb.append("<set name='四月' value='494' color='FF8E46'/>");
      sb.append("<set name='五月' value='761' color='008E8E'/>");
       sb.append("<set name='六月' value='960' color='D64646'/>");
       sb.append("<set name='七月' value='629' color='8E468E'/>");
       sb.append("<set name='八月' value='622' color='588526'/>");
       sb.append("<set name='九月' value='376' color='B3AA00'/>");
       sb.append("<set name='十月' value='494' color='008ED6'/>");
       sb.append("<set name='十一月' value='761' color='9D080D'/>");
       sb.append("<set name='十二月' value='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的格式如下：

</categories>
<dataset seriesName='温度' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>
<set value='1327' />
<set value='1826' />
<set value='1699' />
<set value='1511' />
<set value='1904' />
<set value='1957' />
<set value='1296' />
</dataset>

</graph>