一 簡介
自從ColdFusion（以下簡稱CF）被Macromedia公司收購了以后，MM公司將CF在FLASH應用又提升了一個層次，利用CF可以動態的和FLASH集成。其中最長用的是HARPOON，但是CF在FLASH圖表方面的作用卻很少有人知道。今天我要講的就是FLASH在CF中最被看好的特性之一，內建圖表。
首先我們需要工具，動態的生成FLASH圖表全靠Macromedia Generator，Generator是FLASH輸出服務器用來發動CF制圖的引擎。Generator制圖一般的過程就是：
1）CF將數據傳遞給Generator
2）Generator將該數據變成圖表并返回給CF
3）輸出到瀏覽器
當然，你不要特意的去安裝Generator，這在你安裝ColdFusion的時候自動安裝好了。如果你安裝了COLDFUSION，可以下載本教程，里面包含了本文章中將要用到的數據庫和腳本文件。
二 熟悉標記
CF用來制圖的標記有兩個，即<CFGRAPH>和<CFGRAPHDATA>,其中<CFGRAPH>用的最多，而<CFGRAPHDATA>使用頻率幾乎不到1%，所以我們只要熟悉<CFGRAPH>就行了。首先介紹一下<CFGRAPH>幾個基本屬性字段。
<CFGRAPH>輸出以下參數是必須的。
1.TYPE：圖表的類型，有5種，餅圖，柱形圖，折線圖，條形圖，面積圖。
2.QUERY：用來接受CF傳遞數據
3.VALUECOLUMN:用來制圖的數據查詢列，例如，一類文章的總數
4.FILEFORMAT：在瀏覽器輸出的格式，有兩種，FLASH的SWF和JPG格式。
還有些參數，因為不是很重要的，我們將在后面實際應用中再一一介紹。
三 示范
這是重點，最好親手操作一下，你可以下載本教程中的數據庫使用，不要另外建立一個數據庫了，另外本數據庫的在CF設置的數據源為CFLASH。
我的數據庫設計比較簡單，完全是為了這篇文章做的，一共有兩個表：FILE和SORTFILE表存儲文章的標題TITLE，詳細信息detail，文章類型SORT，當然還有個IDSORT包含文章的類型SORTID和名稱SORTNAME。
這兩個表的關系是：FILE中的SORT連接到SORT查詢。
我們下面就開始了。
1.首先我們在CF建立一個查詢，然后分組、排序。當然排序你可以免了的。
內容如下：
<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是查詢列的數據，我的目的是統計每個類型里面有多少篇文章。ITEMCOLUMN是顯示標簽，我這里設置顯示SORTNAME，類型名稱。 FILEFORMAT是輸出類型。我這里選擇的是FLASH，如果要用圖片顯示，你可以改為JPG。borderwidth:這是圖表邊框，0就是不顯示邊框。DEPTH，為縱深度，你不想 讓你的圖表就是一個死板的平面圖吧？設置這里可以更有立體感。
好了。現在把上面組合成一個文件，源文件如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!---
title:讓ColdFusion來做FLASH<1>
author:wait([email protected])
description:CFGGRAPH應用
date:November,11 2002
--->
<!--- 查詢數據庫 --->
<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="[email protected]">wait</A>.All Rights Reserved.</font></center>
</body>
</html>
代碼拷貝框
| 以下是引用片段： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> |
顯示圖片如下：
每個類型的都會按比例來顯示，這就是餅圖
當然，你只要一下TYPE類型，就可以變成其他的了圖形了，例如我一直想要的折線圖
下面是4種常用的效果圖。
是不是很有趣呢？圖表的比例按照我們數據庫的真實比例而動態構成，是不是你想要的效果呢？你可以根據自己的需要而改變，例如背景色，字體，說到字體，需要提醒一點的是，不支持中文[也許是我孤陋寡聞吧]。如果不是你想要的效果，請明天接著看吧，明天，我們將會在餅圖上做鏈接，真正做到動態的圖表。注意，今天下載的源代碼和教程不包含明天將要說到的（還沒開始寫），但是數據庫不會改變。
版權所有，轉載請事先通知我。
[email protected]
昨天介紹了<CFGRAPH>標記的用法，就象你所看到的，這用途非常廣泛，財務報表，股票，各種統計，甚至經典首頁那個FLASH投票系統都可以用這來做，因為原理都一樣，在數據庫中動態的調取數據，然后生成FLASH或JPG。不過經典首頁上的那個投票系統局限性太大，他必須是按照當初設計的格式來顯示，而<CFGRAPH>可以動態的生成各種樣式的圖表，因為可以接受來自客戶端的數據，例如我做一個表單，里面可以選擇圖表樣式，縱深度，初始值，背景色，邊框顏色...要查詢的數據，然后動態的傳遞給<CFGRAPH>，然后顯示出來，這擴展性是不是更好？
現在我們來看看<CFGRAPHDATA>標記，昨天我說到，這個標記使用率不到1%，但是做出來總會有用處的。下面我來看看一個在實際應用中可能碰到的問題：一家股份公司原來是由3個董事出資成立，他們3個每個人擁有公司的股份不一樣，這也經常變化，因為他們自身有時在這公司抽錢出去做他們自己的事，或者轉讓股權。經過我們請來的會計師評估，這公司總資產是4000萬。現在我也想參與進去控股，我現在必須先要算一下。如果我出2100萬，會控制這公司多少的股份，是否達到了能控制這公司的51%的股份。<CFGRAPHDATA>功能就是這樣的，我提供一個數字進去，和其他動態的數據進行比較。然后按比例顯示出來。現在我們回來昨天那個數據庫上來，我們把那個數據庫看做一個BBS的數據庫，天天有人發表文章，所以各版塊的文章數量占文章總數的比例實時變化，我現在要加一個數字進行對比，例如我要把我另外一個網站的個人專欄19篇文章全部轉移到這個數據庫里面，所以讓我們還是先來瞧瞧占多少比例再說。
<CFGRAPHDATA>
VALUE="19"
ITEM="WAIT"
</CFGRAPHDATA>
很簡單Value是用來和其他比較的數字,ITEM用來顯示的項目
<CFGARPDATA>還有兩個參數，但不是必須的，一個COLOR，顏色。URL，鏈接地址，這等下我們會在后面說到的。這些屬性也是<CFGRAPH>的屬性。
<CFGRAPHDATA>必須放在<CFGRAPH>中，開始處或結束處，現在我們修改一下昨天做的那個餅圖。
<CFGRAPH
TYPE="Pie"
QUERY="wait"
VALUECOLUMN="Count"
ITEMCOLUMN="sortname"
FILEFORMAT="Flash"
TITLE="The Pie"
borderwidth="0"
depth="10">
<CFGRAPHDATA
value="19"
item="wait">
</cfgraphdata>
</CFGRAPH>
我們在加在尾部。
顯示的格式如下
比昨天多了一個WAIT項，而且我那19篇文章如果放在這，就占了很高的比例了。當然，你也可以用其他的方式顯示出來。例如我用曲線圖，并加了一些修飾
<cfgraph
type="Line"
QUERY="wait"
valueColumn="count"
ItemColumn="sortname"
FileFormat="flash"
TITLE="The Line"
Scaleto="20"
depth="0"
GRIDLINES="4"
scalefrom="0"
>
<CFGRAPHDATA
value="19"
item="wait">
</cfgraphdata>
</cfgraph>
顯示如下：
但是用來顯示比例好象不怎么合適，曲線圖更適合于一個數值的變化。我們應該根據實際需要而確定用什么顯示出來。
我在曲線圖<CFGRAPH>里面在昨天的基礎上加了兩個參數：
GRIDLINES：背景網格數量，不包括最上面和底部那兩根原始線條。
scalefrom：網格旁邊顯示的初始值。我這是為0
<cfgraphdata>就介紹到這里。休息一下，等會我們真正挑戰動態FLASH圖形鏈接，看看<CFGRAPH>是怎么動態s鏈接URL的。
--------------------------------------------
ColdFusion的<CFGRAPH>還允許我們鏈接到其他的地址，當然，也可以傳遞數值給接受網頁。現在，要說的就是這。
現在我們看看我在第一節說到的查詢數據庫代碼。
<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>
這數據庫總共就查了一個數值--SORTNAME和一個SQL合計函數。現在我希望，你們看到一個圖表，而想進一步看看里面的具體文章。但是，我們這里是按類別區分的，只可能點擊進去看到一個類別的所有文章，而不是某一篇文章。這容易，只要能鏈接，沒什么能阻攔我們前進腳步的。
現在我們把第一節那源代碼修改一下，添加幾個參數。原來的代碼如下：
<CFGRAPH
TYPE="Pie"
QUERY="wait"
VALUECOLUMN="Count"
ITEMCOLUMN="sortname"
FILEFORMAT="Flash"
TITLE="The Pie"
borderwidth="0"
depth="10">
</CFGRAPH>
現在我們開始改造。值得注意的，這次我們用柱形圖我那數據庫FILE表中的文章類型是連接SORT表中的SORTID，而不是SORTNAME，而我們這里只能傳遞SORTNAME，但是我們先不管那么多，傳遞過去讓那邊用COLDFUSION處理轉換。
<CFGRAPH
TYPE="bar"
QUERY="WAIT"
VALUECOLUMN="wait_count"
ITEMCOLUMN="sortName"
FileFormat="flash"
DEPTH="15"
SCALETO="20"
SCALEFROM="0"
Barspacing="10"
Gridlines="4"
URL="show.cfm?sortName="
URLCOLUMN="Sortname">
</CFGRAPH>
如果你看了第2節，你會發現就加了3個參數，一個是URL,URLCOLUMN。另外一個是Barspacing URL是用來連接網頁地址的，我們目的是鏈接到一個網頁，顯示那個類別的首頁。URLCOLUMN是用來傳遞網頁地址后面數值的。看了上面，你大概有個了解吧？當然，如果你連接到一個HTML頁而后面沒有參數了。URLCOLUMN也可以省了。另外上面參數Barspacing="10"，我這里是用柱形顯示的，不想每根柱子都緊緊的挨在一起。所以用了Barspacing來間隔每根柱子的間距，單位是象素。
修改保存以后運行運行如下：
可以想象一樣，上面這段代碼是鏈接到 show.cfm?sortname=#sortname#,show.cfm是我們用來顯示類別的首頁和顯示一篇文章詳細情況的CFML腳本文件。
現在開發我們來擺平show.cfm
先頭我說了，我傳送的是sortname而不是sortid，當用戶點一個類型的柱子時候，就傳遞了一個sortname，例如是XML，這里就要顯示所有XML文章列表，點一個文章標題，就查看這篇文章的詳細情況。
首先來轉換，把sortname轉換成SORTID，然后再查詢文章
《顯示類別代碼1》
<cfquery name="check" datasource="CFLASH">
SELECT sortID,sortName FROM SORT
WHERE SortName='#URL.SortName#'
</cfquery>
<CFQUERY NAME="ShowSort" datasource="CFLASH">
select ID,title from file
where file.sort=#check.sortID#
ORDER BY ID DESC
</CFQUERY>
只要你懂點SQL語句，就很容易理解上面的，第一個查詢，是提取表里sortname相同與URL傳遞sortname的所有字段，SORT表里總共只有2個字段第二個查詢，提取表FILE里面所有類型等于第一個查詢里面SORTID字段的所有文章ID，TITLE，即ID和文章標題。
下面就容易很多了，顯示這個類型所有的文章標題列表,稍為修飾了一下。
《顯示類別代碼2》
<ul>
<cfoutput query="showsort">
<LI>
<a href="show.cfm?ID=#ID#" target="_blank">#title#</a><br>
</LI>
</cfoutput>
</ul>
<br><br><br><a href="3.cfm">返回圖表</a>
文章標題的鏈接還是鏈接到show.cfm網頁，也就是自己本身的網頁。我們需要加個判斷。
1。如果URL上傳遞過來的sortname，我們查詢所有文章等于sortname
2。如果URL傳遞過來的是ID，我們就查詢文章ID等于URL上ID的文章。
3、4。如果兩個參數都傳遞了，或者什么都不傳遞，我們可以做另外的事，給提示，或者設置默認值。
但是我只說前面兩種。第一種我們前面介紹了，顯示所有本類型文章列表。現在我們說說第2種。先提示一下，如果判斷URL傳遞的值是否存在可以用CF的IsDefined()函數而不是用象<CFIF URL.SORTNAM>這樣的表達式，寫過程序的朋友都知道，NULL和“不存在”完全是兩碼事。
顯示文章的詳細數據還要顯示這篇文章是屬于哪個類型。所以查詢加了一些語句。
《顯示文章代碼1》
<CFQUERY NAME="showdetail" datasource="CFLASH">
select file.title,file.detail,sort.sortID,sort.sortname from file,sort
where ID=#URL.ID# AND file.sort=sort.sortID
</CFQUERY>
《顯示文章代碼2》
<cfoutput query="showdetail">
<b>文章主題</b>：#title#<br>
<b>文章類型</b>：#sortname#<br>
<b>詳細內容</b>：
<blockquote>
#detail#
</blockquote><p>
</cfoutput>
<a href="javascript:window.close()">關閉窗口</a>|<a href="3.cfm">返回圖表</a>
看懂了嗎？如果不懂我也沒辦法，只有建議你去看看COLDFUSION編程這方面的教程。(注意現在是廣告時間)對了，前個月我路過李家村，發現有賣書的，專賣COLDFUSION書，其中有一本叫《輕松掌握COLDFUSION》，入門非常不錯，價格公道，童叟無欺，，你可瞧準了，是電子工業出版社出版的喲。www.china-pub.com
接上面
---------------------------------------------------------------
重新組織一下思路，
1.如果URL傳遞有SORTNAME
執行《顯示類別代碼1》
然后執行《顯示類別代碼2》
2.如果URL傳遞有ID
執行《顯示文章代碼1》
然后執行《顯示文章代碼2》
組合以后源文件如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!---
title:讓ColdFusion來做FLASH<3>
author:wait([email protected])
description:與CFGGRAPH交互
date:November,11 2002
--->
<CFif Isdefined("URL.SortName")>
<cfquery name="check" datasource="CFLASH">
SELECT sortID,sortName FROM SORT
WHERE SortName='#URL.SortName#'
</cfquery>
<CFQUERY NAME="ShowSort" datasource="CFLASH">
select ID,title from file
where file.sort=#check.sortID#
ORDER BY ID DESC
</CFQUERY>
<ul>
<cfoutput query="showsort">
<LI>
<a href="show.cfm?ID=#ID#" target="_blank">#title#</a><br>
</LI>
</cfoutput>
</ul>
<br><br><br><a href="3.cfm">返回圖表</a>
</CFIF>
<CFIF IsDefined("URL.ID")>
<CFQUERY NAME="showdetail" datasource="CFLASH">
select file.title,file.detail,sort.sortID,sort.sortname from file,sort
where ID=#URL.ID# AND file.sort=sort.sortID
</CFQUERY>
<cfoutput query="showdetail">
<b>文章主題</b>：#title#<br>
<b>文章類型</b>：#sortname#<br>
<b>詳細內容</b>：
<blockquote>
#detail#
</blockquote><p>
</cfoutput>
<a href="javascript:window.close()">關閉窗口</a>|<a href="3.cfm">返回圖表</a>
</CFIF>
代碼拷貝框
| 以下是引用片段： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <CFif Isdefined("URL.SortName")> <CFQUERY NAME="ShowSort" datasource="CFLASH"> <CFIF IsDefined("URL.ID")> <cfoutput query="showdetail"> </cfoutput> |
隨便點一個文章標題，會在新窗口中彈出所點的那篇文章詳細情況。
結束語：這只是COLDFUSION和FLASH結合的一部分，但是不支持中文,如果改用COLFUSION配合JAVA那就能實現K形圖,數據實時變化了.但是我們這里討論的是CF和FLASH的結合.另外COLDFUSION利用FLASH COMPONENT KIT還有更多的效果，那時候我們就可以做真正動態的FLASH站點了。不過哪有下載我也沒找到。誰有可以給我發一份。我先在這里說聲謝謝。本教程網上沒有演示，因為虛擬主機太貴，如果哪位有空間的朋友愿意代勞在網上演示一下我會感激不盡的。也歡迎喜歡ColdFusion的朋友和我交流。[email protected]
新聞熱點
疑難解答
