FusionCharts是一個能幫你創建其引人注目的動態圖像效果的Macromedia Flash控件。充分利用Macromedia Flash所具有的流暢功能來創建簡潔的、交互式的和引人注目的動態圖像
FusionCharts是InfoSoft Global的一個產品，InfoSoft Global 公司是專業的Flash圖形方案提供商，他們還有幾款其他的，基于Flash技術的產品，都非常的漂亮。
FusionCharts是一個跨平臺，跨瀏覽器的flash圖表組件解決方案，能夠被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 簡單 HTML 頁面甚至PPT調用。你不需要知道任何關于flash編程的知識，你只需要知道你所用的編程語言就可以了。
FusionCharts是一個閃光的圖表組件，它可以用來制作數據動畫圖表，其中動畫效果用的是Adobe Flash 8 （原Macromedia Flash的）制作的flash ， FusionCharts可用于任何網頁的腳本語言類似于HTML ， .NET，ASP ， JSP技術的， PHP ， ColdFusion等，提供互動性和強大的圖表。使用XML作為其數據接口， FusionCharts充分利用流體美麗的Flash創建緊湊，互動性和視覺逮捕圖表
不需要安裝任何擴展Active-X控件或組件來渲染效果。對于服務器不需要安裝組件，FusionCharts能夠運行的非常流暢。你只需上載核心的SWF文件到服務器中并將為其配置XML數據文件。
FusionCharts能很大程度地減輕服務器的負荷，相當在客戶端處理工作。由于該控件文件非常小，因此也非常適合窄頻帶傳輸。
FusionCharts兼容多種腳本語言：如ASP，ASP.NET,JSP, PHP, Perl, CGI, CF等，如同在客戶端進行處理時，無論是哪一種腳本語言通過數據訪問組件都沒太大關系。
你可以用客戶端中很少的幾句腳本來控制FusionCharts，也能夠在客戶端中建立全新的圖形而不需要重新加載頁面和圖形
FusionCharts提供了自制的很多選項：比如透明度、色彩主題、熱點選區、盤旋標題等。其最大的好處在于你能夠利用XML數據文件進行自定義
4. Chart 和XML 元素定義說明（API）
There are 4 ways using which you can provide XML data to FusionCharts:
|
In this method, you provide the URL of XML Data Document to FusionCharts. The chart now sends a request for XML data to the specified URL, reads it, parses it and then renders the charts accordingly. The following diagram would help you understand better:
(Click on the diagram below to see the animated feature tour on this process)
|
|
|
|
As you can see above, the following steps are involved in this process:
1. You first send the HTML content and SWF file to the end viewer's browser. Along with the SWF, you also tell where the data is to be pulled from. This URL points to your server side scripts which would output the XML data document for the chart.
2. Once the SWF is loaded on the end viewer's machine, it sends a request for XML data document to the specified URL.
3. Your server side scripts at this URL now
o Take in the passed parameters (if any)
o Process them
o Interact with the database
o Get data from data base in native objects like Recordsets, Data Readers etc.
o Convert this data into XML format using simple string concatenations or using XML DOM.
o Finally write this data to output stream (NOT physically on server).
4. FusionCharts now accepts this XML data, parses it and finally renders the chart.
If your dataURL contains special characters like ?, & etc., you need to URL Encode. Also, if you want any parameters as a part of dataURL to your server side script, you'll need to URL Encode the entire dataURL. Example: if you want to provide data URL as Data.asp?id=1&subId=2, it should be provided as Data%2Easp%3Fid%3D1%26subId%3D2
|
|
|
|
Effectively, in this process you need the following to build a chart:
1. Chart Container Page - The page which contains the HTML code to embed and show the chart. This page contains the URL for XML Data Document also.
2. Chart SWF File
3. Data Provider Page - The page which will provide XML Data to FusionCharts. This page outputs ONLY XML and no HTML tags.
|
|
Sample Usage of dataURL method using direct HTML Embedding Method
|
|
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="300" id="Column2D" align="center">
<param name="movie" value="Column2D.swf" />
<param name="FlashVars" value="&dataURL=Data.asp" />
<param name="quality" value="high" />
<embed src="Column2D.swf" FlashVars="&dataURL=Data.asp" quality="high" bgcolor="#ffffff" width="400" height="300" name="Column2D" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
|
|
|
|
Sample Usage of dataURL method using FusionCharts JavaScript Class
|
|
<div id="chart1div">
This text is replaced by the chart.
</div>
<script type="text/javascript">
var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "0");
chart1.setDataURL("Data.asp");
chart1.render("chart1div");
</script>
|
|
|
|
dataURL method is the recommended method as it does not place any limits on the size of XML Data. Also, if you're using special characters (UTF-8 or double byte characters) in your XML, you need to necessarily use dataURL method.
|
|
|
In this method, you send the XML data along with the HTML Content and chart SWF file to the browser. The SWF loads, reads this data (present in same page) and then renders the chart. The following diagram would help you understand better:
(Click on the diagram below to see the animated feature tour on this process)
|
|
|
|
As you can see above, the following steps are involved in this process:
1. You send the HTML content, chart SWF file and XML data all at once to the end viewer's browser.
2. Once the SWF is loaded on the end viewer's machine, it reads the XML data present on the same page
3. It finally parses it and then renders the chart.
If your XML Data Document contains special characters in dataXML mode, you'll need to XML/URL Encode them.
|
|
|
|
Effectively, in this process you need the following to build a chart:
1. Chart Container Page - The page which contains the HTML code to embed and show the chart. It also contains the XML data to be used by the chart.
2. Chart SWF File
|
|
Sample Usage of dataXML method using direct HTML Embedding Method
|
|
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="300" id="Column2D" align="center">
<param name="movie" value="Column2D.swf" />
<param name="FlashVars" value="&dataXML=<chart><set name='Data1' value='1' /></chart>" />
<param name="quality" value="high" />
<embed src="Column2D.swf" FlashVars="&dataXML=<chart><set name='Data1' value='1' /></chart>" quality="high" bgcolor="#ffffff" width="400" height="300" name="Column2D" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
|
|
|
|
Sample Usage of dataXML method using FusionCharts JavaScript Class
|
|
<div id="chart1div">
This text is replaced by the chart.
</div>
<script type="text/javascript">
var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "0");
chart1.setDataXML("<chart><set name='Data1' value='1' /></chart>");
chart1.render("chart1div");
</script>
|
|
|
|
dataXML method is not recommended if you've higher amounts of data. In that case, use dataURL method.
|
|
In this method, you provide the XML data to FusionCharts using JavaScript functions (present on the same page in which chart is present). The following diagram would help you understand better:
(Click on the diagram below to see the animated feature tour on this process)
|
|
|
|
As you can see above, the following steps involved in this:
1. Your server first sends the HTML content of the page and the chart SWF. Now, along with this, it also sends data for chart either as JavaScript arrays or XML stored in JavaScript string variables.
2. Once the SWF is loaded, it registers itself with pre-defined JavaScript function FC_Rendered.
3. Now, if the data was sent as JavaScript arrays, your JavaScript functions convert it into XML data document using string concatenation. Or, if you're using AJAX, you can also request ready-made XML data from your server.
4. This XML data is conveyed to the chart using the pre-build setDataXML method (defined in FusionCharts class).
5. The chart reads the data, parses it and then renders.
|
|
|
|
Sample Usage of JavaScript + setDataXML method
|
|
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function FC_Rendered(DOMId){
if (DOMId=="ChId1"){
updateChart();
}
}
function updateChart(){
var strXML = "<chart palette='2' caption='Factory Output ' >";
strXML = strXML + "</chart>";
var chartObj = getChartFromId("ChId1");
chartObj.setDataXML(strXML);
}
</SCRIPT>
<BODY>
<div id="chart1div">
This text is replaced by the chart.
</div>
<script type="text/javascript">
var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "1");
chart1.setDataXML("<chart></chart>");
chart1.render("chart1div");
</script>
</BODY>
|
|
|
|
|
In this method, you provide the URL of XML data to FusionCharts using JavaScript functions (present on the same page in which chart is present). The chart then sends a request for XML data to the specified URL, reads it, parses it and then renders the charts accordingly. The following diagram would help you understand better:
(Click on the diagram below to see the animated feature tour on this process)
|
|
|
|
As you can see above, the following steps involved in this:
1. Your server first sends the HTML content of the page and the chart SWF. Now, along with this, it also sends pre-defined JavaScript functions to update the chart.
2. Once the SWF is loaded, it registers itself with pre-defined JavaScript function FC_Rendered.
3. Your JavaScript functions now update the chart using setDataURL method, by passing the URL of XML Data Document.
4. The chart sends a request for the XML data, reads it, parses it and then renders.
|
|
|
|
Sample Usage of JavaScript + setDataURL method
|
|
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function FC_Rendered(DOMId){
if (DOMId=="ChId1"){
updateChart();
}
}
function updateChart(){
var chartObj = getChartFromId("ChId1");
chartObj.setDataURL("Data.asp");
}
</SCRIPT>
<BODY>
<div id="chart1div">
This text is replaced by the chart.
</div>
<script type="text/javascript">
var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "1");
chart1.setDataXML("<chart></chart>");
chart1.render("chart1div");
</script>
</BODY>
|
|
|
存放swf文件。
存放js文件，主要是一些函數的方法調用，能夠幫你用一種友好的方式把圖形嵌入到html 頁面
調用的函數使用參數的說明：
/**
* Encodes the dataURL before it's served to FusionCharts.
* If you have parameters in your dataURL, you necessarily need to encode it.
* @param strDataURL - dataURL to be fed to chart
* @param addNoCacheStr - Whether to add aditional string to URL to disable caching of data
* @return
*/
String encodeDataURL(String strDataURL, String addNoCacheStr,
HttpServletResponse response);
/**
* Creates the Chart HTML+Javascript to create the FusionCharts object with the given parameters.
* This method uses JavaScript to overcome the IE browser problem with SWF wherein you have to 'Click to activate' the control
* @param chartSWF - SWF File Name (and Path) of the chart which you intend to plot
* @param strURL - If you intend to use dataURL method for this chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method)
* @param strXML - If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method)
* @param chartId - Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
* @param chartWidth - Intended width for the chart (in pixels)
* @param chartHeight - Intended height for the chart (in pixels)
* @param debugMode - Whether to start the chart in debug mode
* @param registerWithJS - Whether to ask chart to register itself with JavaScript
*/
String createChart(String chartSWF, String strURL, String strXML,
String chartId, int chartWidth, int chartHeight, boolean debugMode,
boolean registerWithJS);
/**
* Creates the Chart HTML to embed the swf object with the given parameters
* @param chartSWF - SWF File Name (and Path) of the chart which you intend to plot
* @param strURL - If you intend to use dataURL method for this chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method)
* @param strXML - If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method)
* @param chartId - Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
* @param chartWidth - Intended width for the chart (in pixels)
* @param chartHeight - Intended height for the chart (in pixels)
* @param debugMode - Whether to start the chart in debug mode
*/
String createChartHTML(String chartSWF, String strURL,
String strXML, String chartId, int chartWidth, int chartHeight,
boolean debugMode);
<?xml version='1.0' encoding='UTF-8'?>
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="org.springframework.context.ApplicationContext"%>
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils"%>
<%@page import="com.nxt.portal.framework.persistence.hibernateimpl.cdbimlog.CdbimLogDaoImpl;"%>
<%@ include file="../../FusionCharts.jsp"%> 1：引入FusionCharts.jsp文件，創建chart 調用函數createChartHTML
<%
request.setCharacterEncoding("UTF-8"); 2：設置字符集，防止中文亂碼
ApplicationContext ctx = WebApplicationContextUtils
.getWebApplicationContext(request.getSession()
.getServletContext());
CdbimLogDaoImpl impl = (CdbimLogDaoImpl) ctx
.getBean("cdbimLogDao");
Map<String, String> map = impl.countLogByName();
%>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=utf-8" />
<TITLE>接口數據統計</TITLE>
<script language="Javascript" SRC="../../JSClass/FusionCharts.js"></script> 3：引入腳本方式生成chart圖形。
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER>
<h4>
接口調用成功統計——餅圖
</h4>
<%
//Create an XML data document in a string variable 4：創建XML數據文件字符串
String strXML = "";
strXML += "<chart caption='統計項' xAxisName='接口名稱' yAxisName='成功總數' showValues='0' formatNumberScale='0' showBorder='1'>"; 5：chart 元素項說明詳見4.Chart和XMl元素定義說明
for (Iterator itr = map.keySet().iterator(); itr.hasNext();) {
String strkey = (String) itr.next();
String strvalue = (String) map.get(strkey);
strXML += "<set label='" + strkey + "' value=' " + strvalue + "' />"; 6：圖形數據輸出項
}
strXML += "</chart>";
7：使用dataXML方法創建chart圖形
//Create the chart - Column 3D Chart with data from strXML variable using dataXML method
String chartHTMLCode=createChartHTML("../../Charts/Pie3D.swf", "", strXML, "myFirst", 600, 300, false) ;
String chartHTMLCode2=createChartHTML("../../Charts/Column3D.swf", "", strXML, "myFirst", 600, 300, false) ;
%>
<%= chartHTMLCode%>
<h4>
接口調用成功統計——柱形圖
</h4>
<%= chartHTMLCode2%>
</CENTER>
</BODY>
</HTML>