FusionCharts 在ASP.net / Asp 中的使用 总结

FusionCharts 是InfoSoft Global公司的产品，该公司是专业提供Flash图形方案的提供商。

就说该公司提供的统计图吧，Flash效果，很酷。

我曾用过，componentOne，Dundas Chart ，Infragistics

觉得还是FusionCharts 使用起来最方便。

优点有：

1. 它无需安装，只需引入所需的 *.swf 文件，js文件和官方写好的几个公共方法的文件就可以了

2. 它是免费的。

。。。 其他的就不多说了。

 

它使用的范围： Asp,Asp.net,PHP,JSP,Html,PPT，Coldfusion调用。

 

可产生： 柱状图3D/2D,饼图，区域，蜡烛图，漏斗图，甘特图等等。

 

图分为3类：

单系列图

多系列图

联合图

 

下载： http://www.fusioncharts.com/free/Downloads/FusionChartsFree.zip

 

解压缩， 有如下几个文件夹

Charts： 有22个Swf，用于Fusion创建图用

JSClass： 一个JS文件 是用于将图嵌入网页用

Code：    示例代码

Gallery, Content : 可以不看。就是也些说明文档。

 

基本格式如下， 具体请看帮助文档。

<graph caption='标题'  decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0'>

     <set name='一月' value='20000' link='xxx.aspx' color='FFCCCC'/>

     <set name='二月' value='20000' link='n-xxx.aspx' color='FFCCCC'/>

     <set name=’三月' value='20000' link='javascript:yourJsFunction('xxx.asp','target');' color='FFCCCC'/>

      <set name='二月' /> <!-- 无数据时，显示为空，占个位置用 -->

      <set />

</graph>

--------------------

现在直接进入主题，如何用。

QQ： 22967225

Author： William Lin

 

1. Asp中 

准备工作：

1. 建一个FusionCharts 文件夹 里面放入

FusionCharts.js，FusionCharts.asp，FC_Colors.asp

22个swf文件（如 FCF_Pie2D.swf）

 

a)FusionCharts.js

/** * FusionCharts: Flash Player detection and Chart embedding. * Version: vFree.1.2 (1st November, 2007) - Added Player detection, New conditional fixes for IE, supports FORM in IE * * Morphed from SWFObject (http://blog.deconcept.com/swfobject/) under MIT License: * http://www.opensource.org/licenses/mit-license.php * */ if(typeof infosoftglobal == "undefined") var infosoftglobal = new Object(); if(typeof infosoftglobal.FusionChartsUtil == "undefined") infosoftglobal.FusionChartsUtil = new Object(); infosoftglobal.FusionCharts = function(swf, id, w, h, debugMode, registerWithJS, c, scaleMode, lang, detectFlashVersion, autoInstallRedirect){ if (!document.getElementById) { return; } //Flag to see whether data has been set initially this.initialDataSet = false; //Create container objects this.params = new Object(); this.variables = new Object(); this.attributes = new Array(); //Set attributes for the SWF if(swf) { this.setAttribute('swf', swf); } if(id) { this.setAttribute('id', id); } if(w) { this.setAttribute('width', w); } if(h) { this.setAttribute('height', h); } //Set background color if(c) { this.addParam('bgcolor', c); } //Set Quality this.addParam('quality', 'high'); //Add scripting access parameter this.addParam('allowScriptAccess', 'always'); //Pass width and height to be appended as chartWidth and chartHeight this.addVariable('chartWidth', w); this.addVariable('chartHeight', h); //Whether in debug mode debugMode = debugMode ? debugMode : 0; this.addVariable('debugMode', debugMode); //Pass DOM ID to Chart this.addVariable('DOMId', id); //Whether to registed with JavaScript registerWithJS = registerWithJS ? registerWithJS : 0; this.addVariable('registerWithJS', registerWithJS); //Scale Mode of chart scaleMode = scaleMode ? scaleMode : 'noScale'; this.addVariable('scaleMode', scaleMode); //Application Message Language lang = lang ? lang : 'EN'; this.addVariable('lang', lang); //Whether to auto detect and re-direct to Flash Player installation this.detectFlashVersion = detectFlashVersion?detectFlashVersion:1; this.autoInstallRedirect = autoInstallRedirect?autoInstallRedirect:1; //Ger Flash Player version this.installedVer = infosoftglobal.FusionChartsUtil.getPlayerVersion(); if (!window.opera && document.all && this.installedVer.major > 7) { // Only add the onunload cleanup if the Flash Player version supports External Interface and we are in IE infosoftglobal.FusionCharts.doPrepUnload = true; } } infosoftglobal.FusionCharts.prototype = { setAttribute: function(name, value){ this.attributes[name] = value; }, getAttribute: function(name){ return this.attributes[name]; }, addParam: function(name, value){ this.params[name] = value; }, getParams: function(){ return this.params; }, addVariable: function(name, value){ this.variables[name] = value; }, getVariable: function(name){ return this.variables[name]; }, getVariables: function(){ return this.variables; }, getVariablePairs: function(){ var variablePairs = new Array(); var key; var variables = this.getVariables(); for(key in variables){ variablePairs.push(key +"="+ variables[key]); } return variablePairs; }, getSWFHTML: function() { var swfNode = ""; if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" mce_src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" '; swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" '; var params = this.getParams(); for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; } var pairs = this.getVariablePairs().join("&"); if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; } swfNode += '/>'; } else { // PC IE swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">'; swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />'; var params = this.getParams(); for(var key in params) { swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />'; } var pairs = this.getVariablePairs().join("&"); if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';} swfNode += "</object>"; } return swfNode; }, setDataURL: function(strDataURL){ //This method sets the data URL for the chart. //If being set initially if (this.initialDataSet==false){ this.addVariable('dataURL',strDataURL); //Update flag this.initialDataSet = true; }else{ //Else, we update the chart data using External Interface //Get reference to chart object var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id')); chartObj.setDataURL(strDataURL); } }, setDataXML: function(strDataXML){ //If being set initially if (this.initialDataSet==false){ //This method sets the data XML for the chart INITIALLY. this.addVariable('dataXML',strDataXML); //Update flag this.initialDataSet = true; }else{ //Else, we update the chart data using External Interface //Get reference to chart object var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id')); chartObj.setDataXML(strDataXML); } }, render: function(elementId){ //First check for installed version of Flash Player - we need a minimum of 6 if((this.detectFlashVersion==1) && (this.installedVer.major < 6)){ if (this.autoInstallRedirect==1){ //If we can auto redirect to install the player? var installationConfirm = window.confirm("You need Adobe Flash Player 6 (or above) to view the charts. It is a free and lightweight installation from Adobe.com. Please click on Ok to install the same."); if (installationConfirm){ window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"; }else{ return false; } }else{ //Else, do not take an action. It means the developer has specified a message in the DIV (and probably a link). //So, expect the developers to provide a course of way to their end users. //window.alert("You need Adobe Flash Player 6 (or above) to view the charts. It is a free and lightweight installation from Adobe.com. "); return false; } }else{ //Render the chart var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId; n.innerHTML = this.getSWFHTML(); //Added for .NET AJAX and <FORM> compatibility if(!document.embeds[this.getAttribute('id')] && !window[this.getAttribute('id')]) window[this.getAttribute('id')]=document.getElementById(this.getAttribute('id')); //or else document.forms[formName/formIndex][chartId] return true; } } } /* ---- detection functions ---- */ infosoftglobal.FusionChartsUtil.getPlayerVersion = function(){ var PlayerVersion = new infosoftglobal.PlayerVersion([0,0,0]); if(navigator.plugins && navigator.mimeTypes.length){ var x = navigator.plugins["Shockwave Flash"]; if(x && x.description) { PlayerVersion = new infosoftglobal.PlayerVersion(x.description.replace(/([a-zA-Z]|/s)+/, "").replace(/(/s+r|/s+b[0-9]+)/, ".").split(".")); } }else if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0){ //If Windows CE var axo = 1; var counter = 3; while(axo) { try { counter++; axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+ counter); PlayerVersion = new infosoftglobal.PlayerVersion([counter,0,0]); } catch (e) { axo = null; } } } else { // Win IE (non mobile) // Do minor version lookup in IE, but avoid Flash Player 6 crashing issues try{ var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7"); }catch(e){ try { var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6"); PlayerVersion = new infosoftglobal.PlayerVersion([6,0,21]); axo.AllowScriptAccess = "always"; // error if player version < 6.0.47 (thanks to Michael Williams @ Adobe for this code) } catch(e) { if (PlayerVersion.major == 6) { return PlayerVersion; } } try { axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); } catch(e) {} } if (axo != null) { PlayerVersion = new infosoftglobal.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(",")); } } return PlayerVersion; } infosoftglobal.PlayerVersion = function(arrVersion){ this.major = arrVersion[0] != null ? parseInt(arrVersion[0]) : 0; this.minor = arrVersion[1] != null ? parseInt(arrVersion[1]) : 0; this.rev = arrVersion[2] != null ? parseInt(arrVersion[2]) : 0; } // ------------ Fix for Out of Memory Bug in IE in FP9 ---------------// /* Fix for video streaming bug */ infosoftglobal.FusionChartsUtil.cleanupSWFs = function() { var objects = document.getElementsByTagName("OBJECT"); for (var i = objects.length - 1; i >= 0; i--) { objects[i].style.display = 'none'; for (var x in objects[i]) { if (typeof objects[i][x] == 'function') { objects[i][x] = function(){}; } } } } // Fixes bug in fp9 if (infosoftglobal.FusionCharts.doPrepUnload) { if (!infosoftglobal.unloadSet) { infosoftglobal.FusionChartsUtil.prepUnload = function() { __flash_unloadHandler = function(){}; __flash_savedUnloadHandler = function(){}; window.attachEvent("onunload", infosoftglobal.FusionChartsUtil.cleanupSWFs); } window.attachEvent("onbeforeunload", infosoftglobal.FusionChartsUtil.prepUnload); infosoftglobal.unloadSet = true; } } /* Add document.getElementById if needed (mobile IE < 5) */ if (!document.getElementById && document.all) { document.getElementById = function(id) { return document.all[id]; }} /* Add Array.push if needed (ie5) */ if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }} /* Function to return Flash Object from ID */ infosoftglobal.FusionChartsUtil.getChartObject = function(id) { // set off to test in .NET AJAX and <FORM> environment //if (window.document[id]) { // return window.document[id]; //} var chartRef=null; if (navigator.appName.indexOf("Microsoft Internet")==-1) { if (document.embeds && document.embeds[id]) chartRef = document.embeds[id]; else chartRef = window.document[id]; } else { chartRef = window[id]; } if (!chartRef) chartRef = document.getElementById(id); return chartRef; } /* Function to update chart's data at client side (FOR FusionCharts vFREE and 2.x */ infosoftglobal.FusionChartsUtil.updateChartXML = function(chartId, strXML){ //Get reference to chart object var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(chartId); //Set dataURL to null chartObj.SetVariable("_root.dataURL",""); //Set the flag chartObj.SetVariable("_root.isNewData","1"); //Set the actual data chartObj.SetVariable("_root.newData",strXML); //Go to the required frame chartObj.TGotoLabel("/", "JavaScriptHandler"); } /* Aliases for easy usage */ var getChartFromId = infosoftglobal.FusionChartsUtil.getChartObject; var updateChartXML = infosoftglobal.FusionChartsUtil.updateChartXML; var FusionCharts = infosoftglobal.FusionCharts;

 

b)FusionCharts.asp

<% 'Page: FusionCharts.asp 'Author: InfoSoft Global (P) Ltd. 'This page contains functions that can be used to render FusionCharts. 'encodeDataURL function encodes the dataURL before it's served to FusionCharts. 'If you've 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 Function encodeDataURL(strDataURL, addNoCacheStr) 'Add the no-cache string if required if addNoCacheStr=true then 'We add ?FCCurrTime=xxyyzz 'If the dataURL already contains a ?, we add &FCCurrTime=xxyyzz 'We replace : with _, as FusionCharts cannot handle : in URLs if Instr(strDataURL,"?")<>0 then strDataURL = strDataURL & "&FCCurrTime=" & Replace(Now(),":","_") else strDataURL = strDataURL & "?FCCurrTime=" & Replace(Now(),":","_") end if end if 'URL Encode it encodeDataURL = Server.URLEncode(strDataURL) End Function 'renderChart renders the JavaScript + HTML code required to embed a chart. 'This function assumes that you've already included the FusionCharts JavaScript class 'in your page. ' chartSWF - SWF File Name (and Path) of the chart which you intend to plot ' 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) ' 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) ' 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. ' chartWidth - Intended width for the chart (in pixels) ' chartHeight - Intended height for the chart (in pixels) Function renderChart(chartSWF, strURL, strXML, chartId, chartWidth, chartHeight) 'First we create a new DIV for each chart. We specify the name of DIV as "chartId"Div. 'DIV names are case-sensitive. %> <!-- START Script Block for Chart <%=chartId%> --> <div id='<%=chartId%>Div' align='center'> Chart. <% 'The above text "Chart" is shown to users before the chart has started loading '(if there is a lag in relaying SWF from server). This text is also shown to users 'who do not have Flash Player installed. You can configure it as per your needs. %> </div> <% 'Now, we render the chart using FusionCharts Class. Each chart's instance (JavaScript) Id 'is named as chart_"chartId". %> <mce:script type="text/javascript"><!-- //Instantiate the Chart var chart_<%=chartId%> = new FusionCharts("<%=chartSWF%>", "<%=chartId%>", "<%=chartWidth%>", "<%=chartHeight%>"); <% 'Check whether we've to provide data using dataXML method or dataURL method if strXML="" then %> //Set the dataURL of the chart chart_<%=chartId%>.setDataURL("<%=strURL%>"); <% else %> //Provide entire XML data using dataXML method chart_<%=chartId%>.setDataXML("<%=strXML%>"); <% end if %> //Finally, render the chart. chart_<%=chartId%>.render("<%=chartId%>Div"); // --></mce:script> <!-- END Script Block for Chart <%=chartId%> --> <% End Function 'renderChartHTML function renders the HTML code for the JavaScript. This 'method does NOT embed the chart using JavaScript class. Instead, it uses 'direct HTML embedding. So, if you see the charts on IE 6 (or above), you'll 'see the "Click to activate..." message on the chart. ' chartSWF - SWF File Name (and Path) of the chart which you intend to plot ' 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) ' 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) ' 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. ' chartWidth - Intended width for the chart (in pixels) ' chartHeight - Intended height for the chart (in pixels) Function renderChartHTML(chartSWF, strURL, strXML, chartId, chartWidth, chartHeight) 'Generate the FlashVars string based on whether dataURL has been provided 'or dataXML. Dim strFlashVars if strXML="" then 'DataURL Mode strFlashVars = "&chartWidth=" & chartWidth & "&chartHeight=" & chartHeight & "&dataURL=" & strURL else 'DataXML Mode strFlashVars = "&chartWidth=" & chartWidth & "&chartHeight=" & chartHeight & "&dataXML=" & strXML end if %> <!-- START Code Block for Chart <%=chartId%> --> <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="<%=chartWidth%>" height="<%=chartHeight%>" id="<%=chartId%>"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="<%=chartSWF%>"/> <param name="FlashVars" value="<%=strFlashVars%>" /> <param name="quality" value="high" /> <embed src="<%=chartSWF%>" FlashVars="<%=strFlashVars%>" quality="high" width="<%=chartWidth%>" height="<%=chartHeight%>" name="<%=chartId%>" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!-- END Code Block for Chart <%=chartId%> --> <% End Function 'boolToNum function converts boolean values to numeric (1/0) Function boolToNum(bVal) Dim intNum if bVal=true then intNum = 1 else intNum = 0 end if boolToNum = intNum End Function %>

c)FC_Colors.asp

<% 'This page contains an array of colors to be used as default set of colors for FusionCharts 'arr_FCColors is the array that would contain the hex code of colors 'ALL COLORS HEX CODES TO BE USED WITHOUT # Dim arr_FCColors(20), FC_ColorCounter 'We also initiate a counter variable to help us cyclically rotate through 'the array of colors. FC_ColorCounter=0 arr_FCColors(0) = "1941A5" 'Dark Blue arr_FCColors(1) = "AFD8F8" arr_FCColors(2) = "F6BD0F" arr_FCColors(3) = "8BBA00" arr_FCColors(4) = "A66EDD" arr_FCColors(5) = "F984A1" arr_FCColors(6) = "CCCC00" 'Chrome Yellow+Green arr_FCColors(7) = "999999" 'Grey arr_FCColors(8) = "0099CC" 'Blue Shade arr_FCColors(9) = "FF0000" 'Bright Red arr_FCColors(10) = "006F00" 'Dark Green arr_FCColors(11) = "0099FF" 'Blue (Light) arr_FCColors(12) = "FF66CC" 'Dark Pink arr_FCColors(13) = "669966" 'Dirty green arr_FCColors(14) = "7C7CB4" 'Violet shade of blue arr_FCColors(15) = "FF9933" 'Orange arr_FCColors(16) = "9900FF" 'Violet arr_FCColors(17) = "99FFCC" 'Blue+Green Light arr_FCColors(18) = "CCCCFF" 'Light violet arr_FCColors(19) = "669900" 'Shade of green 'getFCColor method helps return a color from arr_FCColors array. It uses 'cyclic iteration to return a color from a given index. The index value is 'maintained in FC_ColorCounter Function getFCColor() 'Update index FC_ColorCounter = FC_ColorCounter + 1 'Return color getFCColor = arr_FCColors(FC_ColorCounter mod Ubound(arr_FCColors)) End function %>

4) 放入22个SWF文件 (FusionChartsFree 下载的文件中有的)

 

然后进行第二步：建自己的XML数据文件，为统计图

DealTypeData.asp

 <% OPTION EXPLICIT Response.Expires=0 Response.Buffer = True 'On Error Resume Next %> <!-- #INCLUDE FILE="FusionCharts/FC_Colors.asp" --> <!--#include file="../../conn.asp"--> <% Dim oRs, oRs2, strQuery Dim strXML 'Generate the graph element strXML = "<graph caption='Product Type statistical Chart of " & rUserName &"' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0'>" 'Iterate through each factory strQuery = "select uUserName,headProductRequestName,count(*) as [count]from vHead where headArchiveType = 'headReactivate' and uUserName ='" & rUserName &"' group by uUserName,headProductRequestName order by 1" Set oRs = server.CreateObject("adodb.recordset") oRs.CursorLocation = 3 oRs.Open strQuery, conn, 3, 3 Do until oRs.Eof strXML = strXML & "<set name='" & oRs("headProductRequestName") & "' value='" & oRs("count") & "' color='" & getFCColor() & "'/>" oRs.moveNext Loop strXML = strXML & "</graph>" 'Finally, close <graph> element Set oRs = nothing 'Set Proper output content-type Response.ContentType = "text/xml" 'Just write out the XML data 'NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER Response.Write(strXML) %>

 

 2. 显示图标。 如果需要传参数直接 ?...&... 跟地址栏中相同

<%@ Language=VBScript %> <HTML> <HEAD> <TITLE> Database Example </TITLE> <SCRIPT LANGUAGE="Javascript" SRC="FusionCharts/FusionCharts.js"></SCRIPT> <!-- #INCLUDE FILE="FusionCharts/FusionCharts.asp" --> </HEAD> <BODY> <form action="DealTypeChartReport.asp" method="get"> &nbsp;&nbsp;<a href="#" onClick="printChart()">Print</a> <div id="containerID"> <% Dim strDataURL strDataURL = "DealTypeData.asp?rUserName=Sam" Call renderChart("FusionCharts/FCF_Pie2D.swf", strDataURL, "", "DealTypeChartId1",650, 500) Response.Write("<hr>") strDataURL = "DealTypeData.asp?rUserName=Elliot" Call renderChart("FusionCharts/FCF_Pie2D.swf", strDataURL, "", "DealTypeChartId2",650, 500) %> </div> </form> </BODY> </HTML>

 

 这样就可以了

如果报： Error in  loading Date  说明没有找到XML文件

如果报： Invaild xmlDate  说明你建立的XMl文件有点错误。

 

注意： 免费版本不支持中文，另外单引号，%，等需要用特殊的字符取代，这个跟XML文件还是有点相似的。

 

 

-----------------------------

Asp.net 中

虽然网上已经有人写了个封装类，但本人觉得封装的不是很彻底，只包含部分图示。

而按照如上的思想，即

1. 自己写XML.Date

2. 展示统计图。

这样的方法，最灵活。 当然使用者如果用的多，可以自行封装。

 

产生自己的XML数据

PieData.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PieData.aspx.cs" Inherits="DB_dataURL_PieData" %>

PieData.aspx

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using DataConnection; public partial class DB_dataURL_PieData : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //This page generates the XML data for the Pie Chart contained in //Default.asp. //For the sake of ease, we've used an Access database which is present in //../App_Data/FactoryDB.mdb. It just contains two tables, which are linked to each //other. //Database Objects - Initialization DbConn oRs; string strQuery; //strXML will be used to store the entire XML document generated string strXML; //Generate the graph element strXML = "<graph caption='Factory Output report' subCaption='By Quantity' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0'>"; //Iterate through each factory strQuery = "select * from Factory_Master"; oRs = new DbConn(strQuery); while (oRs.ReadData.Read()) { //Now create second recordset to get details for this factory strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + oRs.ReadData["FactoryId"].ToString(); DbConn oRs2 = new DbConn(strQuery); oRs2.ReadData.Read(); //Generate <set name='..' value='..'/> strXML += "<set name='" + oRs.ReadData["FactoryName"].ToString() + "' value='" + oRs2.ReadData["TotOutput"].ToString() + "' />"; //Close recordset oRs2.ReadData.Close(); } oRs.ReadData.Close(); //Finally, close <graph> element strXML += "</graph>"; //Set Proper output content-type Response.ContentType = "text/xml"; //Just write out the XML data //NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER Response.Write(strXML); } }   

 

显示数据图： Default.aspx

引入 FusionCharts.dll 文件

<%@ Page Language="C#" %> <%@ Import Namespace="InfoSoftGlobal" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <mce:script runat="server"><!-- protected void Page_Load(object sender, EventArgs e) { //In this example, we show how to connect FusionCharts to a database //using dataURL method. In our other examples, we've used dataXML method //where the XML is generated in the same page as chart. Here, the XML data //for the chart would be generated in PieData.asp. //For the sake of ease, we've used an Access database which is present in //../App_Data/FactoryDB.mdb. It just contains two tables, which are linked to each //other. //Variable to contain dataURL string strDataURL; //the asp script in piedata.asp interacts with the database, //converts the data into proper XML form and finally //relays XML data document to the chart strDataURL = "PieData.aspx"; //Create the chart - Pie 3D Chart with dataURL as strDataURL FCLiteral.Text=FusionCharts.RenderChart("../FusionCharts/FCF_Pie3D.swf", strDataURL, "", "FactorySum", "650", "450", false, false); } // --></mce:script> <html> <head> <title>FusionCharts Free - dataURL and Database Example </title> <% //You need to include the following JS file, if you intend to embed the chart using JavaScript. //Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer //When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors. %> <mce:script language="Javascript" type="text/javascript" src="../FusionCharts/FusionCharts.js" mce_src="FusionCharts/FusionCharts.js"></mce:script> <mce:style type="text/css"><!-- body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .text{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; } --></mce:style><style type="text/css" mce_bogus="1"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .text{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; }</style> </head> <body> <center> <h2> <a href="http://www.fusioncharts.com" mce_href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> - dataURL and Database</h2> <asp:Literal ID="FCLiteral" runat="server"></asp:Literal> <br /> <br /> <a href="../NoChart.html" mce_href="NoChart.html" target="_blank">Unable to see the chart above?</a> <br /> <h5> <a href="../default.aspx" mce_href="default.aspx">« Back to list of examples</a></h5> </center> </body> </html>

 

就这样可以了。

 

备注：

NumberPefix = '$'  前缀

NumberSuffix = '$'  后缀

 

一些特殊字符

百分号： %25

人民币： %A5

单引号： &apos

其他省略

 

formatNumberScale = '0' 数据默认有'K' 或百万的单位

formatNumb = 0/1          数据是否要分割

 

Javasctrip： 

想用同一数据，用不同的图表示，用JS更改swf文件就可以了。

Javasctrip更改数据时：  updateChartXML(domId,CompleteXML);  //这个免费的

                    updateURLXML(domId,CompleteXML);   //这个要收费的

用超级链接，做向下钻取工作。

 

有问题，再一起讨论吧。