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教程会持续更新，

能够多多关注。