TeeChart Pro VCL/FMX是一款主流的圖表制作工具。提供了數百種用于可視化的2D、3D圖形樣式、56種數學、統計和金融函數，以及不限數量的坐標軸和30種調色板組件。TeeChart Pro VCL/FMX教程將會以連載的形式持續為大家帶來TeeChart Pro VCL/FMX的使用方法。 

點擊下載TeeChart Pro VCL/FMX最新試用版 

  本篇教程為大家帶來的是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="//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:='//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名稱獲取正確的名稱。    

例：

請考慮以下數據文件： 

{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代碼用于此示例中的按鈕：

    對于這種類型的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教程會持續更新，可以多多關注。

   如果對于TeeChart Pro VCL/FMX有任何的問題或者想要咨詢的都可以在評論下方留言。

    關注慧聚IT微信公眾號 ???，了解產品的最新動態及最新資訊。