FusionCharts使用教程：使用FusionCharts ASP Class創建圖表

---

FusionCharts可與ASP一同使用以繪制動態數據驅動圖表。使用FusionCharts ASP Class來渲染圖表變得更加容易。接下來，我們一起來看看如何使用FusionCharts ASP Class功能并創建圖表。

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

創建簡單圖表

接下來，我們創建第一個圖表。在本示例中，我們將創建一個 "Monthly Unit Sales"圖表。

運行代碼，將會出現如圖所示的圖表效果：

創建一個帶有外部XML文件的圖表

現在，我們將以另外一種方式創建相同的圖表。此時，我們將使用兩個不同的程序。一個程序利用FusionCharts ASP Class創建圖表XML，另外一個程序借助于Data URL方法利用該XML來渲染圖表。 Data.asp 文件中的代碼可創建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功能:

輸出結果和上例相同：

使用JavaScript渲染器創建簡單圖表：

FusionCharts允許你創建純JavaScript圖表，無需Flash。針對上述代碼并做相應修改后，可實現上述相同的圖表，代碼片段如下：

' 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" )

...