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>