日期:2014-05-16  浏览次数:20431 次

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" /&