zoukankan      html  css  js  c++  java
  • 利用XML和随机数为FusionChart提供数据源

    1、利用XML提供数据源

    column2D.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <chart palette="2" caption="月收入统计(XML)" xAxisName="月份" yAxisName="收入" showValues="1" decimals="0" formatNumberScale="0" baseFontSize="12">
    	<set label="1月"  value="4620" />
    	<set label="2月"  value="8570" />
    	<set label="3月"  value="6710" />
    	<set label="4月"  value="4940" />
    	<set label="5月"  value="7610" />
    	<set label="6月"  value="9600" />
    	<set label="7月"  value="6290" />
    	<set label="8月"  value="6220" />
    	<set label="9月"  value="7888" />
    	<set label="10月" value="4940" />
    	<set label="11月" value="7610" />
    	<set label="12月" value="9600" />
    </chart>
    2、利用随机数提供数据源

    var strXML = "<chart palette='2' caption='月收入统计(随机数)' xAxisName='月份' yAxisName='收入' showValues='1' decimals='0' formatNumberScale='0' baseFontSize='12'>";
        	var i;  //循环次数
        	for(i=1;i<=12;i++){
        		strXML += "<set label ='" + i +"月' value = '" + (Math.random()*1000 + 5000) + "'/>";
        	}
        	strXML = strXML + "</chart>"
    3、页面JSP

    column2D.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>FusionChart柱状图(2D)</title>
    <script type="text/javascript" src="../Scripts/JS/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../Scripts/JS/FusionCharts.js"></script>
    <style type="text/css">
         body,table{
              100%;
             height: 100%;
             font-size: 12px;
         }
    </style>
    <script type="text/javascript">
         $(function(){
        	 //利用XML提供的静态数据来作为数据源
        	 var column2D = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2DId", "96%", "300", "0", "1" );
        	 column2D.setXMLUrl("xml/column2D.xml");
        	 column2D.render("column2D1");
        	 
        	//利用随机数提供的数据来作为数据源
        	var column2D2 = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2D2Id", "96%", "300", "0", "1" );
        	var strXML = "<chart palette='2' caption='月收入统计(随机数)' xAxisName='月份' yAxisName='收入' showValues='1' decimals='0' formatNumberScale='0' baseFontSize='12'>";
        	var i;  //循环次数
        	for(i=1;i<=12;i++){
        		strXML += "<set label ='" + i +"月' value = '" + (Math.random()*1000 + 5000) + "'/>";
        	}
        	strXML = strXML + "</chart>"
        	column2D2.setXMLData(strXML);
       	    column2D2.render("column2D2");
         });
    </script>
    </head>
    <body>
       <table>
          <tr>
            <td>
              <div id="column2D1"></div>
            </td>
          </tr>
          <tr>
            <td>
              <div id="column2D2"></div>
            </td>
          </tr>
       </table>
    </body>
    </html>
    4、运行结果

    (1)初始化


    (2)第一次刷新


    (3)第二次刷新


  • 相关阅读:
    201920201学期20192407《网络空间安全专业导论》第一周学习总结
    JavaEEJSP详解
    JavaEEJSP指令
    JavaSE类与对象
    JavaSE基础知识
    JavaEEEL表达式
    JavaSE关键字
    JavaSE抽象类、内部类、接口
    JavaSE面向对象
    绪论
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315673.html
Copyright © 2011-2022 走看看