WebSnap And TChart
Write By Code6421 2002/10/1
閒話家常
離上一篇文章至今已將近一年了，對一個整日忙碌於專案堆的人來說，每天能用的時間就只有那幾小時，在這少的可以
的時間內，一方面要鑽研技術，另一方面又想把自己的心得化為文章與朋友們分享，實在是不太可能。我常常把範例寫好後
就放在那，心想著那天有空的時候將她轉化為文章發表，但是時間就是不允許我將這個工作完成，也令許多朋友空等了很久，
實在抱歉…(如果說食言會胖的話，那麼我媽大概會要我多食言個幾百次 ;-) )。
在WebSnap 中使用TChart 元件
在我的WebSnap 文章發佈後，有許多朋友向我提起如何在WebSnap 中使用TChart 元件，那時我的回答很簡單，那就是先
建立一個TChart 元件，設定相關的屬性後將結果輸出成圖形檔後顯示於網頁上，技術上這個答案是正確的，唯一缺乏的是一個
完整的範例，這點造成了朋友的困擾。 最近又有幾個朋友重新提起這個問題，這次我在回答他們時就附上了我所寫的一個範例
程式，同時也順便寫下這篇短文，希望對其他有同樣困擾的朋友們有幫助。 要完成這個範例，我們必須要知道幾件事，
第一件事! TChart 元件是否提供可將圖表存成圖形檔的功能，第二件事! 在WebSnap 中我們該用那一個元件來顯示這個圖形。
第一個問題的答案是肯定的，TChart 元件提供了下面這個函式可將圖表輸出成為一個TBitmap 物件:
TeeCreateBitmap(ABackColor:TColor;const Rect:TRect):TBitmap;
有了TBitmap 物件後，現在我們就只剩下如何在WebSnap 顯示她了，WebSnap 提供了一個TAdapterImageField 元件可供我們顯示
圖形，使用方式很簡單，只需要撰寫她的OnGetImage 事件，將圖形檔寫入她所傳入的Image Stream 中即可，這個事件的宣告如下:
procedure (Sender: TObject; Params: TStrings; var MimeType: string;
var Image: TStream; var Owned: Boolean);
在這個範例中，我們需要用到其中的MimeType 及Image 這兩個參數，Image 是一個TStream 物件，以var 方式傳遞至這個事件中，
在這個事件中我們必須建立出一個實體的Stream 物件後交回給TAdapterImageField，她會將這個Stream 指定給TWebResponse 物件後
送回給Client 端，也就是瀏覽器。 MimeType 參數則代表資料的型態，在預設情況下，TAdapterImageField 會指定MimeType 為Image/Jpeg，
也就是JPEG 圖形格式，我們可以藉由改變MimeType 來變換所傳輸的圖形格式。
好了，現在我們已經解決了完成這個範例所需的兩個問題，接下來只需要實作出來就可以了，下面列出OnGetImage 事件的程式碼:
procedure THome.AdaptImageGetImage(Sender: TObject; Params: TStrings;
var MimeType: String; var Image: TStream; var Owned: Boolean);
//use JPEG
procedure CreateJpeg(Bitmap:TBitmap);
begin
Image:=TMemoryStream.Create;
try
with TJPEGImage.Create do begin
try
CompressionQuality := 100;
Assign(Bitmap);
SaveToStream(Image);
finally
Free;
end;
end;
except
Image.Free;
raise;
end;
end;
//use BMP
procedure CreateBmp(Bitmap:TBitmap);
begin
Image:=TMemoryStream.Create;
MimeType:='image/bmp';
try
Bitmap.SaveToStream(Image);
except
Image.Free;
raise;
end;
end;
var
Img:TBitmap;
vSeries:TPieSeries;
begin
vSeries:=TPieSeries.Create(FChart);
try
vSeries.AddPie(FCurValue1,'Value 1',clBlue);
vSeries.AddPie(FCurValue2,'Value 2',clRed);
vSeries.AddPie(FCurValue3,'Value 3',clGreen);
vSeries.AddPie(FCurValue4,'Value 4',clTeal);
FChart.AddSeries(vSeries);
FChart.Color:=clWhite;
FChart.BevelOuter:=bvNone;
Img:=FChart.TeeCreateBitmap(clWhite,Rect(0,0,400,300));
try
CreateBmp(Img);
// CreateJpeg(Img);
finally
Img.Free;
end;
finally
vSeries.Free;
FChart.RemoveAllSeries;
end;
end;
在這段程式碼中，我建立了一個餅狀圖，並加入了四個值後將她添加進Chart 物件中，接著呼叫TeeCreateBitmap 函式取得圖表的Bitmap，
最後呼叫CreateBmp 將這個Bitmap 放入Image Stream中，執行範例程式後可以得到以下的畫面:
程式中也包含了將圖表輸出成JPEG 的副函式，就實務上而言，我建議你使用JPEG格式來輸出圖形，她可以減低網路上的傳輸量。
在範例程式中除了OnGetImage 事件及建立TChart 物件的程式碼之外，其它部份都只是介面上的控制，
所以我就不列出來了(我偷偷小懶)。
範例程式下載位址: http://home.pchome.com.tw/guide/code6421/WebChart.zip
//抱歉，中间有个图http://home.pchome.com.tw/guide/code6421/WebSnap%20And%20TChart.files/image001.jpg没有办法贴出来
