<?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>
{ "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" />'+ '</chart>';
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"'+ '}'+ ']'+ '}';
<%@ 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
