ColdFusion MX 輕鬆製作 FLASH的方法第1/3頁_ColdFusion

一 簡介
　　自從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(parole@163.net)
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="MAILTParole@163.net">wait</A>.All Rights Reserved.</font></center>
</body>
</html>

代碼拷貝框

以下是引用片段： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!--- title:讓ColdFusion來做FLASH<1> author:wait(parole@163.net) 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="MAILTParole@163.net">wait</A>.All Rights Reserved.</font></center> </body> </html>

顯示圖片如下：

每個類型的都會按比例來顯示，這就是餅圖
　　當然，你只要一下TYPE類型，就可以變成其他的了圖形了，例如我一直想要的折線圖
下面是4種常用的效果圖。

　　是不是很有趣呢？圖表的比例按照我們資料庫的真實比例而動態構成，是不是你想要的效果呢？你可以根據自己的需要而改變，例如背景色，字型，說到字型，需要提醒一點的是，不支援中文[也許是我孤陋寡聞吧]。如果不是你想要的效果，請明天接著看吧，明天，我們將會在餅圖上做連結，真正做到動態圖表。注意，今天下載的原始碼和教程不包含明天將要說到的（還沒開始寫），但是資料庫不會改變。

著作權，轉載請事先通知我。
parole@163.net

當前1/3頁 123下一頁閱讀全文