日期:2014-05-16 浏览次数:20518 次
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>
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"
}
]
}
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" /&