利用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{
         width: 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","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）第二次刷新

利用XML和随机数为FusionChart提供数据源

猜你在找的XML相关文章