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)第二次刷新


  • 相关阅读:
    汇编入门学习笔记 (十二)—— int指令、port
    c#List泛型数据扩展,把List&lt;&gt;型数据格式化成List&lt;SelectListItem&gt;,用来作dropdownlist的数据
    使用 Jersey 和 Apache Tomcat 构建 RESTful Web 服务
    Centos6.5 VNC 配置
    HP服务器更换主板前后的注意事项
    【转】BCSphere入门教程01:Immediate Alert--不错
    【转】命令行使用7zip
    【转】 Android BCM4330 蓝牙BT驱动调试记录
    【转】android-support-v7-appcompat.jar 的安装及相关问题解决 --- 汇总整理
    【转】如何在eclipse里关联查看android源码
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315673.html
Copyright © 2011-2022 走看看