FusionCharts可與ASP一同使用以繪製動態數據驅動圖表。使用FusionCharts ASP Class來渲染圖表變得更加容易。接下來,咱們一塊兒來看看如何使用FusionCharts ASP Class功能並建立圖表。javascript
注意:本文中所討論的代碼都包含在Download Package > Code > ASPClass > BasicExample文件夾中。java
建立簡單圖表ui
接下來,咱們建立第一個圖表。在本示例中,咱們將建立一個 "Monthly Unit Sales"圖表。this
運行代碼,將會出現如圖所示的圖表效果:3d
建立一個帶有外部XML文件的圖表orm
如今,咱們將以另一種方式建立相同的圖表。此時,咱們將使用兩個不一樣的程序。一個程序利用FusionCharts ASP Class建立圖表XML,另一個程序藉助於Data URL方法利用該XML來渲染圖表。 Data.asp 文件中的代碼可建立XML,而 SimpleChart.asp文件利用XML渲染圖表。xml
Data.asp文件中的代碼相似於上例中的代碼,惟一不一樣的是,它不渲染代碼,而是將XML流向SimpleChart.asp文件。ip
<%@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())
%>
ci
接下來,咱們一塊兒來看看SimpleChart.asp功能:get
輸出結果和上例相同:
使用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" )
...