TeeChart For VCL/FMX V2017使用教程：第九章 Internet应用

---

内容
前言	9.1 图表格式 （1） 静态图像格式 （2） 输出数据格式 （3）输入数据格式 （4） 在Delphi的ActiveForm上放置TeeChart	9.2  Web服务器应用程序 （1） ISAPI应用程序的编写

---

前言

        TeeChart Pro VCL版本提供了一种新的功能，可以简化互联网/局域网绘图应用程序的设计。有关以下主题的更多示例，请参见Examples文件夹。

9.1 图表格式

9.1.1 静态图像格式

        有关图表导出格式的更多信息，请参阅Export（导出）教程。TeeChart为网页提供了几种静态图像输出格式，JPEG、GIF、PNG和WMF(仅适用于IE)。

        有关图表导出格式的更多信息，请参阅导出和导入图表教程。

        示例。可以将TeeChart图表导出为JPEG图像，并将其链接到一个web页面中。请参阅导出/导入教程中的JPEG部分，来进一步查看以JPEG格式导出图表所需的代码。这个图表可以通过标准的图片链接在网页上进行访问。

        示例   <imgsrc="http://www.myserver.here/tempCharts/myJPEGChart.jpg">

        JPEG图表并没有提供“Live（实时）”图表的优势，比如鼠标点击、实时动画、滚动等等，但是它们几乎可以与任何浏览器一起工作。

9.1.2 输出数据格式

        请参阅导出和导入图表教程，以了解更多关于导入和导出数据到图表的内容。图表数据可以作为文本、XML、Excel电子表格或HTML表格导出。

9.1.3 输入数据格式

• HTML表。查看一下HTML表格导入示例的Examples文件夹。
• TChartWebSource。使用TChart WebSource将一个基于服务器的URL tee文件路径应用到您的客户端图表应用程序。可以在服务器上创建或存储Tee文件，并通过URL直接访问。这为LoadChartFromURL方法提供了另一种选择。
• TSeriesTextSource。SeriesTextSource组件允许将CSV文件数据直接装载到一个序列中。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序列的序列类型，并为源的定义提供相关的字段结构，下面是一个BarSeries:

        将标题列设置为标题文本行的数量，而您不希望SeriesTextSource获取数据。将TSeriesTextSource的Active设置为True来加载该序列数据。上述数据的结果如下图：

上面的代码可以通过以下方式实现:

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);
   {使用关键字'Text'来选择标签字段}
   SeriesTextSource1.AddField('Text',1);
   Active:=True;
 end;
end;

        对于上面的Bar序列示例，“Bar”这个词用于定义Y值。当BarSeries上仅仅添加一个数据变量时，这个名称就不重要了，因为TeeChart会假定它是Y值。在Label字段的情况下，它必须使用标题'Text'(常量Teemsg_Text)来识别它。当添加多个值时(比如ADDXY，或者是具有日期、开盘、最高、最低、收盘的Candle Series（蜡烛序列）)，您就可以通过Series ValueList（序列值列表）名来获得正确的名称。

        示例：

        考虑下面的数据文件:

Date	Open	High	Low	Close
1/1/2000	15	76	7	40
2/1/2000	40	55	35	37
3/1/2000	37	61	29	43

{下面的代码提取数据并将其添加到序列中}
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;

9.1.4 在Delphi的ActiveForm上放置TeeChart

        要创建一个新的ActiveForm应用程序，从Delphi IDE的文件菜单中选择“new”、“Activex”、“ActiveForm”。图表可以放在窗体上，属性可以被添加到窗体中，以执行TeeChart的动作。

        要插入InternetExplorer或其他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">
</OBJECT>

        您可以向Activeform对象添加属性和方法，以向图表提供运行时功能。例如，在上面的图表中，我们添加了“Gradient.Visible”属性来启用/禁用图表后面的Panel Gradient（面板渐变）。按下这个按钮，看看它是如何改变图表的：

        可以通过向HTML页面添加一个按钮来调用该过程。

        示例

  <INPUT TYPE=submitVALUE="示例: 使用VBScript切换回面板渐变" NAME="cdmChartColor"onClick="ToggleGradient()">

        如何将一个TeeChart属性添加到Delphi的ActiveForm中：

        按照以下步骤将图表属性添加到一个ActiveForm项目：

• 1.使用Delphi类型库编辑器将属性添加到您的ActiveForm工程中
• 2.在这种情况下，我们将属性定义为Property Gradient:WordBool;
• 3.使用Type Library'refresh'（类型库‘刷新’）按钮来更新工程的实现单元。
• 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="示例: 使用VBScript切换回面板渐变" NAME="cdmChartColor" onClick="ToggleGradient">

        对于这种类型的图表应用程序，您可能会发现LoadChartFromURL方法是有用的，因为它允许分发集中修改的图表。可以将计时器放在ActiveForm应用程序中，以调用定期更新的基于服务器的图表，从而确保浏览器图表数据是当前的。

9.2 Web服务器应用程序

9.2.1 ISAPI应用程序的编写     

      Delphi使编写ISAPI应用程序非常容易。请参阅TeeChartExamples文件夹中的TeeChart ISAPI示例，以演示基本的图表应用程序。下面将包含一个小节，以显示图表是如何以Stream（流）格式发送到页面的。

{这个事件是在设计时创建的，双击WebModule窗体并添加一个动作... }
procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
Var Stream:TMemoryStream;
begin
  With TForm2.Create(Self) do { 创建一个Chart1的窗体... }
  try
    //请参阅ISAPI演示，以获得创建图表的代码的完整清单
    //从Web窗体中获取参数作为输入。
    With ChartToJPEG(Request) do { 将Chart1转换为UnitChart单元中的JPEG函数}
    try
      Stream:=TMemoryStream.Create;  {在内存中创建一个临时流... }
      try
        SaveToStream(Stream); { 将jpeg保存到流中... }
        Stream.Position := 0;
        Response.ContentType:='image/jpeg';   { 发送的流... }
        Response.ContentStream:=Stream;
        Response.SendResponse;
      finally
        Stream.Free;  {释放临时流... }
      end;
    finally
      Free;  { <-- 释放由ChartToJPEG返回的临时JPEG对象 }
    end;
  finally
    Free; {释放Form2 }
  end;
end;

 

---

© 1996-2017年的Steema Software SL，版权所有。

第九章完