FusionCharts使用教程：使用FusionCharts ASP Class創(chuàng)建圖表

---

FusionCharts可與ASP一同使用以繪制動(dòng)態(tài)數(shù)據(jù)驅(qū)動(dòng)圖表。使用FusionCharts ASP Class來渲染圖表變得更加容易。接下來，我們一起來看看如何使用FusionCharts ASP Class功能并創(chuàng)建圖表。

注意：本文中所討論的代碼都包含在Download Package > Code > ASPClass > BasicExample文件夾中。

創(chuàng)建簡單圖表

接下來，我們創(chuàng)建第一個(gè)圖表。在本示例中，我們將創(chuàng)建一個(gè) "Monthly Unit Sales"圖表。

運(yùn)行代碼，將會(huì)出現(xiàn)如圖所示的圖表效果：

創(chuàng)建一個(gè)帶有外部XML文件的圖表

現(xiàn)在，我們將以另外一種方式創(chuàng)建相同的圖表。此時(shí)，我們將使用兩個(gè)不同的程序。一個(gè)程序利用FusionCharts ASP Class創(chuàng)建圖表XML，另外一個(gè)程序借助于Data URL方法利用該XML來渲染圖表。 Data.asp 文件中的代碼可創(chuàng)建XML，而 SimpleChart.asp文件利用XML渲染圖表。

Data.asp文件中的代碼類似于上例中的代碼，唯一不同的是，它不渲染代碼，而是將XML流向SimpleChart.asp文件。

<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<%
'We have included ../../Includes/FusionCharts_Gen.asp - FusionCharts ASP Class
'to help us easily embed the charts.
%>
<!--#include file="../../Includes/FusionCharts_Gen.asp"-->
<%
'This page demonstrates the ease of generating charts using FusionCharts ASPClass.
'We created a FusionCharts object instance
'Set chart values and configurations and returns the XML using getXML() function
'and write it to the response stream to build the XML
'Here, we have kept this example very simple.
dim FC
' Create FusionCharts ASP class object
set FC = new FusionCharts
' Set chart type to column 3d
call FC.setChartType("column3D")
dim strParam
' Define chart attributes
strParam="caption=Monthly Unit Sales;xAxisName=Month;yAxisName=Units;decimals=0; formatNumberScale=0;showLabels=1"
' Set chart attributes
call FC.setChartParams(strParam)
' Add chart data values and category names
call FC.addChartData("462","label=Jan","")
call FC.addChartData("857","label=Feb","")
call FC.addChartData("671","label=Mar","")
call FC.addChartData("494","label=Apr","")
call FC.addChartData("761","label=May","")
call FC.addChartData("960","label=Jun","")
call FC.addChartData("629","label=Jul","")
call FC.addChartData("622","label=Aug","")
call FC.addChartData("376","label=Sep","")
call FC.addChartData("494","label=Oct","")
call FC.addChartData("761","label=Nov","")
call FC.addChartData("960","label=Dec","")
'set content type as XML
Response.ContentType ="text/xml"
'Return the chart XML for Column 3D Chart
Response.Write(FC.getXML())
%>

接下來，我們一起來看看SimpleChart.asp功能:

輸出結(jié)果和上例相同：

使用JavaScript渲染器創(chuàng)建簡單圖表：

FusionCharts允許你創(chuàng)建純JavaScript圖表，無需Flash。針對(duì)上述代碼并做相應(yīng)修改后，可實(shí)現(xiàn)上述相同的圖表，代碼片段如下：

' Create FusionCharts ASP class object
set FC = new FusionCharts
' Set chart type to column 3d
call FC.setChartType( "column3D" )
' Set JavaScript renderer
FC.setRenderer( "javascript" )

...