fusioncharts

1 官方地址:http://www.fusioncharts.com

2 官方实例: http://www.fusioncharts.com/dev/getting-started/building-your-first-chart.html

FusionChart用XML和JSON两种格式提供数据源实例如下

1、设计思路  

(1)由于FusionChart的数据源格式有两种:XML和JSON,设计用两种格式提供数据源  

(2)两种格式又分为路径格式(XMLUrl和JSONUrl)和字符串格式(XMLData和JSONData)  

(3)根据上述情况,设计出四种格式,分别为XMLUrl、JSONUrl、XMLData和JSONData  

(4)获取当前时间和当前秒数  

(5)利用JQuery定时器原理  

(6)采用定时器,结合hide()和show()方法,让四个图依次隐藏和显示  

2、利用XML提供的静态数据来作为数据源  

Data.xml:         

<?xml version="1.0" encoding="UTF-8"?>
<chart yAxisName="Amount" caption="Person(1XML)" numberPrefix="$" useRoundEdges="1" bgColor="FFFFFF,FFFFFF" 
       showBorder="1" showValues="0" baseFontSize="12">
        <set label="Monday" value="25000"  /> 
        <set label="Tuesday" value="35000" /> 
        <set label="Wednesday" value="42300" /> 
        <set label="Thursday" value="35300" /> 
        <set label="Friday" value="51300" />
        <set label="Saturday" value="64500" />
        <set label="Sunday" value="88900" />

</chart>

3、利用JSON提供的静态数据来作为数据源  

Data.json:         

{
  "chart": {
    "yAxisname": "Amount",
    "caption": "Person(2JSON)",
    "numberPrefix": "$",
    "useRoundedges": "1",
    "bgColor": "FFFFFF,FFFFFF",
    "showBorder": "1",
    "showValues":"0",
    "baseFontSize":"12"
  },
  "data": [
    {
      "label": "Monday",
      "value": "25000"
    },
    {
      "label": "Tuesday",
      "value": "35000"
    },
    {
      "label": "Wednesday",
      "value": "42300"
    },
    {
      "label": "Thursday",
      "value": "35300"
    },
    {
      "label": "Friday",
      "value": "31300"
    },
    {
      "label": "Saturday",
      "value": "64500"
    },
    {
      "label": "Sunday",
      "value": "88900"
    }
  ]
}

4、利用XML拼接字符串提供的静态数据来作为数据源  

var strXML = '<chart yAxisName="Amount" caption="Person(3XML)" numberPrefix="$" useRoundEdges="1" bgColor="FFFFFF,FFFFFF"'+ 
           'showBorder="1" showValues="0" baseFontSize="12">'+
          '<set label="Monday" value="25000"  />'+ 
          '<set label="Tuesday" value="35000" />'+ 
          '<set label="Wednesday" value="42300" />'+ 
          '<set label="Thursday" value="35300" />'+ 
          '<set label="Friday" value="51300" />'+
          '<set label="Saturday" value="64500" />'+
          '<set label="Sunday" value="88900" />'+
        '</chart>';

5、利用JSON拼接字符串提供的静态数据来作为数据源  

var strJSON = '{"chart": {'+
        		    '"yAxisname": "Amount",'+
        		    '"caption": "Person(4JSON)",'+
        		    '"numberPrefix": "$",'+
        		    '"useRoundedges": "1",'+
        		    '"bgColor": "FFFFFF,FFFFFF",'+
        		    '"showBorder": "1",'+
        		    '"showValues":"0",'+
        		    '"baseFontSize":"12"'+
        		  '},'+
        		  '"data": ['+
        		    '{"label": "Monday",'+
        		      '"value": "25000"'+
        		    '},'+
        		    '{'+
        		      '"label": "Tuesday",'+
        		      '"value": "35000"'+
        		    '},'+
        		    '{'+
        		      '"label": "Wednesday",'+
        		      '"value": "42300"'+
        		    '},'+
        		    '{'+
        		      '"label": "Thursday",'+
        		      '"value": "35300"'+
        		    '},'+
        		    '{'+
        		      '"label": "Friday",'+
        		      '"value": "31300"'+
        		    '},'+
        		    '{'+
        		      '"label": "Saturday",'+
        		      '"value": "64500"'+
        		    '},'+
        		    '{'+
        		      '"label": "Sunday",'+
        		      '"value": "88900"'+
        		    '}'+
        		 ']'+
        		'}';

6、源码  

FourDataFormat.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的数据源由XML和JSON两种格式提供</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{
      width: 100%;
      height: 100%;
      text-align: center;
    }
    #column2D11,#column2D22,#column2D33,#column2D44{
      float: left;
      padding-bottom: 5px;
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 5px;
    }
    #time{
      background-color: #CCCCCC;
    }
</style>
<script type="text/javascript">
    $(function(){
    	 //利用XML提供的静态数据来作为数据源
     	 var column2D1 = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2D1Id", "650", "280", "0", "1" );
     	 column2D1.setXMLUrl("xml/Data.xml");
     	 column2D1.render("column2D11");
     	 
       //利用JSON提供的静态数据来作为数据源
    	 var column2D2 = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2D2Id", "650", "280", "0", "1" );
    	 column2D2.setJSONUrl("xml/Data.json");
    	 column2D2.render("column2D22");
    	 
    	 //利用XML拼接字符串提供的静态数据来作为数据源
     	 var column2D3 = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2D3Id", "650", "280", "0", "1" );
     	 var strXML = '<chart yAxisName="Amount" caption="Person(3XML)" numberPrefix="$" useRoundEdges="1" bgColor="FFFFFF,FFFFFF"'+ 
           'showBorder="1" showValues="0" baseFontSize="12">'+
          '<set label="Monday" value="25000"  />'+ 
          '<set label="Tuesday" value="35000" />'+ 
          '<set label="Wednesday" value="42300" />'+ 
          '<set label="Thursday" value="35300" />'+ 
          '<set label="Friday" value="51300" />'+
          '<set label="Saturday" value="64500" />'+
          '<set label="Sunday" value="88900" />'+
        '</chart>';
    	 column2D3.setXMLData(strXML);
     	 column2D3.render("column2D33");
     	 
      //利用JSON拼接字符串提供的静态数据来作为数据源
    	var column2D4 = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2D4Id", "650", "280", "0", "1" );
        var strJSON = '{"chart": {'+
        		    '"yAxisname": "Amount",'+
        		    '"caption": "Person(4JSON)",'+
        		    '"numberPrefix": "$",'+
        		    '"useRoundedges": "1",'+
        		    '"bgColor": "FFFFFF,FFFFFF",'+
        		    '"showBorder": "1",'+
        		    '"showValues":"0",'+
        		    '"baseFontSize":"12"'+
        		  '},'+
        		  '"data": ['+
        		    '{"label": "Monday",'+
        		      '"value": "25000"'+
        		    '},'+
        		    '{'+
        		      '"label": "Tuesday",'+
        		      '"value": "35000"'+
        		    '},'+
        		    '{'+
        		      '"label": "Wednesday",'+
        		      '"value": "42300"'+
        		    '},'+
        		    '{'+
        		      '"label": "Thursday",'+
        		      '"value": "35300"'+
        		    '},'+
        		    '{'+
        		      '"label": "Friday",'+
        		      '"value": "31300"'+
        		    '},'+
        		    '{'+
        		      '"label": "Saturday",'+
        		      '"value": "64500"'+
        		    '},'+
        		    '{'+
        		      '"label": "Sunday",'+
        		      '"value": "88900"'+
        		    '}'+
        		 ']'+
        		'}';
      column2D4.setJSONData(strJSON);
    	column2D4.render("column2D44");
    	
    	$("#time").click(function(){
    		//获取当前时间
    		var date = new Date();
    		//获取当前秒数
    		var sec = date.getSeconds();
    		//图一隐藏
    		$("#column2D11").hide();
    		//过4秒钟,图一显示
    		setTimeout("$('#column2D11').show()",sec+4000);
    		//再过4秒钟,图二隐藏
    		setTimeout("$('#column2D22').hide()",sec+8000);
    		//再过4秒钟,图二显示
    		setTimeout("$('#column2D22').show()",sec+12000);
    		//再过4秒钟,图三隐藏
    		setTimeout("$('#column2D33').hide()",sec+16000);
    		//再过4秒钟,图三显示
    		setTimeout("$('#column2D33').show()",sec+20000);
    		//再过4秒钟,图四隐藏
    		setTimeout("$('#column2D44').hide()",sec+24000);
    		//再过4秒钟,图四显示
    		setTimeout("$('#column2D44').show()",sec+28000);
    	});
    });
</script>
</head>
<body>
   <div id="column2D11"></div>
   <div id="column2D22"></div>
   <div id="column2D33"></div>
   <div id="column2D44"></div>
   <div style="width: 100%;text-align: center;">
     <input type="button" value="开始计时" id="time"/>
   </div>
  </div>
</body>
</html>

7、显示结果  

(1)初始化  

(2)点击“开始计时”  

  

8、设计缺陷  

     在设计定时控制四个图依次隐藏和显示,但是最后一个图完成后,第二个图无法显示出来,如图所示:  

posted @ 2015-12-31 09:44  ChineseMoonGod  阅读(214)  评论(0编辑  收藏  举报