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