一 簡介
自從ColdFusion(以下簡稱CF)被Macromedia公司收購了以后,MM公司將CF在FLASH應用又提升了一個層次,利用CF可以動態(tài)的和FLASH集成。其中最長用的是HARPOON,但是CF在FLASH圖表方面的作用卻很少有人知道。今天我要講的就是FLASH在CF中最被看好的特性之一,內(nèi)建圖表。
首先我們需要工具,動態(tài)的生成FLASH圖表全靠Macromedia Generator,Generator是FLASH輸出服務器用來發(fā)動CF制圖的引擎。Generator制圖一般的過程就是:
1)CF將數(shù)據(jù)傳遞給Generator
2)Generator將該數(shù)據(jù)變成圖表并返回給CF
3)輸出到瀏覽器
當然,你不要特意的去安裝Generator,這在你安裝ColdFusion的時候自動安裝好了。如果你安裝了COLDFUSION,可以下載本教程,里面包含了本文章中將要用到的數(shù)據(jù)庫和腳本文件。
二 熟悉標記
CF用來制圖的標記有兩個,即CFGRAPH>和CFGRAPHDATA>,其中CFGRAPH>用的最多,而CFGRAPHDATA>使用頻率幾乎不到1%,所以我們只要熟悉CFGRAPH>就行了。首先介紹一下CFGRAPH>幾個基本屬性字段。
CFGRAPH>輸出以下參數(shù)是必須的。
1.TYPE:圖表的類型,有5種,餅圖,柱形圖,折線圖,條形圖,面積圖。
2.QUERY:用來接受CF傳遞數(shù)據(jù)
3.VALUECOLUMN:用來制圖的數(shù)據(jù)查詢列,例如,一類文章的總數(shù)
4.FILEFORMAT:在瀏覽器輸出的格式,有兩種,F(xiàn)LASH的SWF和JPG格式。
還有些參數(shù),因為不是很重要的,我們將在后面實際應用中再一一介紹。
三 示范
這是重點,最好親手操作一下,你可以下載本教程中的數(shù)據(jù)庫使用,不要另外建立一個數(shù)據(jù)庫了,另外本數(shù)據(jù)庫的在CF設置的數(shù)據(jù)源為CFLASH。
我的數(shù)據(jù)庫設計比較簡單,完全是為了這篇文章做的,一共有兩個表:FILE和SORTFILE表存儲文章的標題TITLE,詳細信息detail,文章類型SORT,當然還有個IDSORT包含文章的類型SORTID和名稱SORTNAME。
這兩個表的關系是:FILE中的SORT連接到SORT查詢。
我們下面就開始了。
1.首先我們在CF建立一個查詢,然后分組、排序。當然排序你可以免了的。
內(nèi)容如下:
CFQUERY NAME="wait" DATASOURCE="cflash">
SELECT sortname, COUNT(*) AS Count
FROM sort,file
WHERE file.sort = sort.sortID
GROUP BY sortname
ORDER BY sortname
/CFQUERY>
上面這個QUERY是查詢每個類型里面有多少篇文章。
2.做好了查詢以后就有開始制作圖表了。
如果對CFGRAPH>還不熟悉的話,請再看看前面介紹的基本類型。
CFGRAPH
TYPE="Pie"
QUERY="wait"
VALUECOLUMN="Count"
ITEMCOLUMN="sortname"
FILEFORMAT="Flash"
TITLE="The Pie"
borderwidth="0"
depth="10">
/CFGRAPH>
我來介紹一下,TYPE是類型PIE是餅圖,QUERY就是接受先前在CF里面查詢名。VALUECOLUMN是查詢列的數(shù)據(jù),我的目的是統(tǒng)計每個類型里面有多少篇文章。ITEMCOLUMN是顯示標簽,我這里設置顯示SORTNAME,類型名稱。 FILEFORMAT是輸出類型。我這里選擇的是FLASH,如果要用圖片顯示,你可以改為JPG。borderwidth:這是圖表邊框,0就是不顯示邊框。DEPTH,為縱深度,你不想 讓你的圖表就是一個死板的平面圖吧?設置這里可以更有立體感。
好了?,F(xiàn)在把上面組合成一個文件,源文件如下:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
!---
title:讓ColdFusion來做FLASH1>
author:wait(parole@163.net)
description:CFGGRAPH應用
date:November,11 2002
--->
!--- 查詢數(shù)據(jù)庫 --->
CFQUERY NAME="wait" DATASOURCE="cflash">
SELECT sortname, COUNT(*) AS Count
FROM sort,file
WHERE file.sort = sort.sortID
GROUP BY sortname
ORDER BY sortname
/CFQUERY>
html>
head>
title>讓ColdFusion來做FLASH/title>
/head>
body>
center>h3>CFGRAPH的TYPE4種屬性/h3>/center>
hr>
center>
!--- 下面分別列出了各種屬性的應用 --->
CFGRAPH
TYPE="Pie"
QUERY="wait"
VALUECOLUMN="Count"
ITEMCOLUMN="sortname"
FILEFORMAT="Flash"
TITLE="The Pie"
borderwidth="0"
depth="10">
/CFGRAPH>
HR>
center>b>Power by ColdFusion/b>br>fontsize="-1">COPYRIGHT(C)2002 A HREF="MAILTParole@163.net">wait/A>.All Rights Reserved./font>/center>
/body>
/html>
代碼拷貝框
以下是引用片段:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> !--- title:讓ColdFusion來做FLASH1> author:wait(parole@163.net) description:CFGGRAPH應用 date:November,11 2002 ---> !--- 查詢數(shù)據(jù)庫 ---> CFQUERY NAME="wait" DATASOURCE="cflash"> SELECT sortname, COUNT(*) AS Count FROM sort,file WHERE file.sort = sort.sortID GROUP BY sortname ORDER BY sortname /CFQUERY>
html> head> title>讓ColdFusion來做FLASH/title> /head> body> center>h3>CFGRAPH的TYPE4種屬性/h3>/center> hr> center> !--- 下面分別列出了各種屬性的應用 ---> CFGRAPH TYPE="Pie" QUERY="wait" VALUECOLUMN="Count" ITEMCOLUMN="sortname" FILEFORMAT="Flash" TITLE="The Pie" borderwidth="0" depth="10"> /CFGRAPH> HR> center>b>Power by ColdFusion/b>br>fontsize="-1">COPYRIGHT(C)2002 A HREF="MAILTParole@163.net">wait/A>.All Rights Reserved./font>/center> /body> /html>
|
顯示圖片如下:
每個類型的都會按比例來顯示,這就是餅圖
當然,你只要一下TYPE類型,就可以變成其他的了圖形了,例如我一直想要的折線圖
下面是4種常用的效果圖。
是不是很有趣呢?圖表的比例按照我們數(shù)據(jù)庫的真實比例而動態(tài)構(gòu)成,是不是你想要的效果呢?你可以根據(jù)自己的需要而改變,例如背景色,字體,說到字體,需要提醒一點的是,不支持中文[也許是我孤陋寡聞吧]。如果不是你想要的效果,請明天接著看吧,明天,我們將會在餅圖上做鏈接,真正做到動態(tài)的圖表。注意,今天下載的源代碼和教程不包含明天將要說到的(還沒開始寫),但是數(shù)據(jù)庫不會改變。
版權(quán)所有,轉(zhuǎn)載請事先通知我。
parole@163.net
123下一頁閱讀全文