zoukankan      html  css  js  c++  java
  • 用FusionChartsFree做饼状图、柱状图、折线图的实例

    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="../Contents/Style.css" type="text/css" />
    <script src="../js/jquery.js" type="text/javascript"></script>
    <script language="JavaScript" src="../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='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的格式如下:
    <graph caption='' subcaption='' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='0' numdivlines='3' numVdivlines='0' yaxisminvalue='1000' yaxismaxvalue='1800'  rotateNames='0'>
    <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='1327' />
     <set value='1826' />
     <set value='1699' />
     <set value='1511' />
     <set value='1904' />
     <set value='1957' />
     <set value='1296' />
     </dataset>
    <dataset seriesName='湿度' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>
     <set value='2042' />
     <set value='3210' />
     <set value='2994' />
     <set value='3115' />
     <set value='2844' />
     <set value='3576' />
     <set value='1862' />
    </dataset>
    <dataset seriesName='降水量' color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>
     <set value='850' />
     <set value='1010' />
     <set value='1116' />
     <set value='1234' />
     <set value='1210' />
     <set value='1054' />
     <set value='802' />
    </dataset>
    <dataset seriesName='能见度' color='DBDC25' anchorBorderColor='DBDC25' anchorBgColor='DBDC25'>
     <set value='541' />
     <set value='781' />
     <set value='920' />
     <set value='754' />
     <set value='840' />
     <set value='893' />
     <set value='451' />
    </dataset>

    </graph>

  • 相关阅读:
    Java实现 LeetCode 242 有效的字母异位词
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 344 反转字符串
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/3949019.html
Copyright © 2011-2022 走看看