TeeChart Pro VCL/FMX教程之網絡應用

TeeChart Pro VCL/FMX是一款主流的圖表製做工具。提供了數百種用於可視化的2D、3D圖形樣式、56種數學、統計和金融函數，以及不限數量的座標軸和30種調色板組件。

本篇教程爲你們帶來的是TeeChart Pro VCL/FMX中網絡應用的這一節，主要分爲如下幾個部分：

1. 介紹

2. 圖表格式

   靜態圖像格式

   輸出數據格式

   輸入數據格式

   HTML表格

   TChartWebSource

   TSeriesTextSource

   將TeeChart放入Delphi的ActiveForm>

3. Web服務器應用程序

   編寫ISAPI應用程序

介紹

TeeChart Pro VCL/FMX版本提供了可簡化Internet / Intranet Charting應用程序的設計。

圖表格式

靜態格式

TeeChart爲網頁，JPEG，GIF，PNG和WMF提供多種靜態圖像導出格式（僅適用於IE）。

TeeChart能夠導出爲JPEG圖像，能夠連接到網頁，也能夠經過標準圖像連接在網頁上訪問該圖表。

例：

<img src="http://www.myserver.here/tempCharts/myJPEGChart.jpg">複製代碼

JPEG圖表不提供live圖表的優點，例如鼠標點擊，實時動畫，滾動等，但它們幾乎適用於任何瀏覽器

輸出數據格式

圖表數據能夠導出爲文本，XML，Excel電子表格或HTML表格。

輸入數據格式

• HTML表格。

• TChartWebSource-使用TChart WebSource將基於服務器的URL tee文件路徑導到客戶端圖表的應用程序，這樣能夠在服務器上建立或存儲Tee文件，並經過URL直接訪問，這是LoadChartFromURL方法的替代方法。

• TSeriesTextSource-SeriesTextSource組件容許將CSV文件數據直接加載到Series，CSV文件能夠以不一樣的方式分隔，也能夠是託管在URL地址的本地文件或服務器文件。

例：

Text source file, csv delimited:
  Fruit,Qty,Price/Kilo
  Apples,1,76
  Pears,2,45
  Bananas,3,66
  Oranges,4,41
  Kiwis,5,55複製代碼

TSeriesTextSource組件識別關聯的TeeChart系列的Series類型，併爲源的定義提供相關的字段結構，如下是BarSeries：

​

將標題列設置爲您不但願SeriesTextSource從中獲取數據的標題文本行數。 將TSeriesTextSource Active設置爲True會加載Series數據。 以上數據的結果以下圖：

​

以上方法能夠經過如下方式實現：

procedure TForm1.BitBtn1Click(Sender: TObject);
begin
 With SeriesTextSource1 do
 Begin
   Series:=Series1;
   Filename:='http://www.steema.com/test.txt';
   Headerlines:=1;
   SeriesTextSource1.AddField('Bar',3);
   {Use the keyword 'Text' to select the Label field}
   SeriesTextSource1.AddField('Text',1);
   Active:=True;
 end;複製代碼

對於上面的Bar Series示例，單詞Bar用於定義Y值。 當僅爲BarSeries添加一個數據變量時，名稱並不重要，由於TeeChart將假定它是Y值。 對於Label字段，它必須使用標題Text（常量Teemsg_Text）來標識它。 添加多個值時（如AddXY或具備Date，Open，High，Low，Close的Candle Series），您能夠經過Series ValueList名稱獲取正確的名稱。

例：

請考慮如下數據文件：

日期	開盤價	最高價	最低價	收市價
1/1 /2000	15	76	7	40
2/1/2000	40	55	35	37
3/1 /2000	37	61	29	43

{The following code extracts the data and adds it to the Series}
procedure TForm1.Button1Click(Sender: TObject);
var colcount: integer;
begin
 With SeriesTextSource1 do
 Begin
   Series:=Series1;
   Filename:='c:\tempdata\testcandledata.txt';
   Headerlines:=1;
   For colcount:=0 to Series1.ValuesList.Count-1 do
   begin
     SeriesTextSource1.AddField(Series1.ValuesList[colcount].Name,colcount+1);
   end;
   Active:=True;
 end;
end;複製代碼

將TeeChart放入Delphi的ActiveForm中

要建立新的ActiveForm應用程序，請從Delphi IDE的文件菜單中選擇New>Activex>ActiveForm。 能夠在表單上放置TChart，而且能夠將屬性添加到表單內以執行TeeChart操做。

想要插入在Internet Explorer或其餘ActiveX感知瀏覽器中，您應該記下新ActiveXForm的CLSID編號，並將其插入頁面，語法相似於如下示例：

<OBJECT 
   id="TeeVCLAX1" 
   type="application/x-oleobject"
   hspace="0"
   vspace="0"
   codebase="TeeChartAXFormExample.ocx#version=1,0,0,1"" CLASSID="CLSID:6C03C4DE-C883-4B1E-AA11-996319F91A8F">複製代碼

您能夠向Activeform對象添加屬性和方法，以便爲圖表在運行時提供便利。 例如，對於上面的圖表，咱們添加了Gradient.Visible，屬性來啓用/禁用圖表後面的Panel Gradient。

例： 如何使用Delphi將TeeChart屬性添加到ActiveForm

按照如下步驟將Chart屬性添加到ActiveForm項目：

1. 使用Delphi類型庫編輯器向ActiveForm項目添加屬性

2. 在這種狀況下，咱們將屬性定義爲Property Gradient：WordBool;

3. 使用類型庫刷新按鈕更新項目的實施單元。

4. Delphi將在項目的實現單元中爲新屬性建立一個空的Get函數和Set過程。 您能夠經過填充函數和過程來添加對所需TeeChart屬性的訪問，以下所示：

   function TTeeVCLAX.Get_Gradient: WordBool;
   begin
     result:=Chart1.Gradient.Visible;
   end;
   
   procedure TTeeVCLAX.Set_Gradient(Value: WordBool);
   begin
     Chart1.Gradient.Visible:=Value;
   end;複製代碼

   如今編譯修改後的項目可使用瀏覽器腳本語言（如VBScript）訪問此屬性。 下面列出的VBScript代碼用於此示例中的按鈕：

<SCRIPT LANGUAGE="VBScript">
SUB ToggleGradient
        if TeeVCLAX1.Gradient = 0 then
          TeeVCLAX1.Gradient = 1   'replace TRUE/FALSE with numeric equivalents else TeeVCLAX1.Gradient = 0 end if END SUB </SCRIPT> <INPUT TYPE=BUTTON VALUE="Example: Toggle Back Panel Gradient using VBScript" NAME="cdmChartColor" onClick="ToggleGradient">複製代碼

對於這種類型的Charting應用程序，您可能會發現LoadChartFromURL方法頗有用，由於它容許分發集中修改的圖表，能夠在ActiveForm應用程序上放置一個計時器，以調用按期更新的基於服務器的圖表，從而保證瀏覽器圖表數據是最新的。

Web服務器應用程序

編寫ISAPI應用程序

Delphi使編寫ISAPI應用程序很是容易。 下面是一部分代碼，以顯示圖表如何以Stream格式發送到頁面。

{ This event is created at design-time, double-clicking the WebModule
  form and adding an action... }
procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
Var Stream:TMemoryStream;
begin
  With TForm2.Create(Self) do { create the Form where is the Chart1... }
  try
    //See the ISAPI demo for a full listing of the code that creates the Chart
    //taking parameters from a Web Form as input.
    With ChartToJPEG(Request) do { convert Chart1 to JPEG Function in UnitChart Unit}
    try
      Stream:=TMemoryStream.Create;  { create a temporary stream in memory... }
      try
        SaveToStream(Stream); { save the jpeg to the stream... }
        Stream.Position := 0;
        Response.ContentType:='image/jpeg';   { send the stream... }
        Response.ContentStream:=Stream;
        Response.SendResponse;
      finally
        Stream.Free;  { release the temporary stream... }
      end;
    finally
      Free;  {複製代碼

本篇教程就介紹到這裏，對以上內容有任何疑惑或者建議均可以在下方評論留言，TeeChart Pro VCL/FMX教程會持續更新，

能夠多多關注。