TeeChart for PHP教程（十二）：Javascript / HTML5图表

最新推荐文章于 2022-07-06 15:04:14 发布

yuyuyuyo

最新推荐文章于 2022-07-06 15:04:14 发布

阅读量174

点赞数

分类专栏： TeeChart 文章标签： teechart php steema 图表控件工业4.0

本文链接：https://blog.csdn.net/yuyuyuyo/article/details/99286536

版权

TeeChart 专栏收录该内容

67 篇文章 5 订阅

订阅专栏

TeeChart for PHP包含100%的PHP源代码。它支持PHP5及更高的版本。它可作为一个调色板组件整合到针对PHP的Delphi编程环境中，从而让其他人在运行时以创建组件的方式来引用。第一个版本提供17种图表类型（2D和3D的多种组合），11个数学函数和一些图表工具组件以扩展功能。

点击下载TeeChart for PHP试用版

本教程是TeeChart for PHP教程中Javascript / HTML5图表这一节，将会介绍如何在客户端页面上创建静态和实时HTML5图表。内容主要分为以下几个部分：

介绍
静态导出
实时HTML5图表

介绍

TeeChart for PHP为您提供了将图表编写到原生HTML5中的浏览器页面的可能性，有两种模式，Static/静态和Live/实时。

静态将图表写为原始级别的画布命令系列，忠实地将图表的每一行，原始形状和文本复制为一系列原生HTML5画布指令。此导出格式可以重现TeeChart PHP库中的每个图表，就像JPEG或PNG格式图像一样。

实时将图表写为一系列可寻址的HTML5元素。这允许动画和交互性应用于原生HTML5 Javascript格式的图表。此导出模式不支持所有图表类型，有关详细信息，请参阅下面的描述部分，但允许添加交互式工具并支持mousedrag缩放和页面滚动。

静态导出

将图表导出为静态HTML5将生成文件或文本，其中包含浏览器理解和显示图表所必需的代码。获得的外观几乎与使用GDGraphics生成的图表相同。

如何导出到静态HTML5图表

将Chart导出到HTML5所需的步骤很简单，它只包含一行代码：

include "../../../../sources/TChart.php";     
      $chart1 = new TChart(500,350);
      $chart1->getAspect()->setView3D(false);
      $chart1->getHeader()->setText("HTML5 Demo");
      $chart1->getPanel()->getGradient()->setVisible(false);     
      $chart1->getPanel()->setColor(Color::WHITE());
 
      // Add Series to the Chart
      $line = new Line($chart1->getChart());
      $line->fillSampleValues(6);
      $line->setColor(Color::DARK_GRAY());
      $line->getLinePen()->setWidth(3);
      $line->getPointer()->setVisible(true);
      $line->getPointer()->setStyle(PointerStyle::$CIRCLE);
      $chart1->getChart()->getExport()->getImage()->getHTML5()->save($path."\\TChart.html");

此代码将创建一个html文件，其中包含执行或html 5 Chart所必需的行。

您可以在导出 - > HTML5 - > HTML5导出文件夹中找到的功能演示中找到如何使用它的示例。

实时HTML5图表

正如我们在教程11-插件和附加功能中看到的，最新版本的TeeChart PHP在其源代码中包含了一个版本的TeeChart JavaScript，它允许我们使用javascript版本独立的使用javascript代码在我们的浏览器中生成图表，我们也可以继续使用我们的PHP代码创建图表，然后将其导出到javascript图表，从而在我们的实时页面上获取javascript图表，而无需使用单行的javascript代码。

并非所有系列类型都可用于此类导出。

可以在Features - > JScript - > TeeChartJavaScript中的功能演示中找到示例。

其他使用不同类型os系列的工作示例可以在Features - > JScript - > Series - >中的Features演示中找到。

如何导出到实时HTML5图表

当我们将图表输入到javascript（实时）时，我们有两个选项可供选择。

我们可以将Chart导出到一个文件中，在该文件中我们生成一个HTML文件，其中包含浏览器的必要代码，以便在javascript中显示代码：

$chart1->getChart()->getExport()->getImage()->getJavaScript()->SaveToFile('jschartToolTip.html', $chartName);

或者我们可以直接导出到流，这将允许我们直接在浏览器中绘制图表，而无需事先将代码保存在文件中。

echo  $chart1->getChart()->getExport()->getImage()->getJavaScript()->Render($chartName)->toString();

$ chartName参数是可选的，当我们需要在使用的javascript代码中使用Chart的名称时，它将用作id。如果未包含此参数，则默认使用chart1。

您可以在JScript文件夹的Features演示中找到工作示例。

以下是完整代码的示例：

getChart());
      $line->fillSampleValues(6);
      $line->getPointer()->setVisible(true);
     
      $tipTool = new ToolTip($chart1->getChart());
      $tipTool->setSeries($line);     
      $tipTool->getFont()->setName('Tahoma');
      $tipTool->getFont()->setSize(20);
      $tipTool->getFont()->setColor(Color::RED());
     
      $tipTool->setOnShow("
        function(tool,series,index) { scaling=2; poindex=index; }       
      ");
     
      $tipTool->setOnHide("
        function() { scaling=0; poindex=-1; }
      ");
     
      $tipTool->setOnGetText('
        function(tool,text) { return "Text:\n"+text; }
      ');
 
      // In case you want to save to a file
      $chart1->getChart()->getExport()->getImage()->getJavaScript()->SaveToFile('jschartToolTip.html');        
?>     
getChart()->getExport()->getImage()->getJavaScript()->Render()->toString();     
?>

Javascript / HTML5图表工具

PHP版本中包含的JavaScript功能允许我们轻松地向Chart添加各种工具。这些只能在导出实时图表时使用。可用的工具是：

注解

此工具允许我们在图表中添加一个或多个注释。您可以选择帮助库中提供的属性。

此外，您可以在Features - > JScript - > Annotation中的Features演示中找到示例。

 $chart1->getChart()->getTools()->add(new Annotation());
      $chart1->getChart()->getTools()->getTool(0)->setText("Annotation");
      $chart1->getChart()->getTools()->getTool(0)->setLeft(100);
      $chart1->getChart()->getTools()->getTool(0)->setTop(100);

光标

如果我们使用光标工具，我们可以在Chart中显示不同的游标。这些可以根据您的喜好进行定制，方法是更改颜色，宽度和长度等属性，并使其跟随鼠标的移动。

它包含一个事件（指定为属性）OnChange，它允许我们在页面中添加javascript。更改它将被指定为文本，并将在Cursor的事件OnChange中执行。

可以在Features - > JScript - > Cursor中的Features演示中找到示例.

滚轮

滚轮工具允许我们在包含大量数据时选择图表的特定区域，哪怕是很难理解小细节。我们可以使用所有数据指定图表的所需大小，并在此区域内指定我们想要详细查看的内容，这将在另一个图表中显示。我们可以选择使用鼠标轻松放大或移动此选定区域。

除了允许您自定义大小的工具属性，选择区域等，它还包括事件（指定为属性）OnChanging，它允许您在页面中添加javascript代码。这被指定为文本，并将在Cursor OnChanging事件中实现。

您可以在Features - > JScript - > Scroller中的Features演示中找到示例。

滑块

滑块工具具有与滚动工具类似的功能，允许我们选择要在图表中显示的最大值和最小值，但区别在于它不会创建包含所有数据的另一个图表，但添加了滑块组件在我们指定的位置。这允许我们使用鼠标移动所有图表数据。它还包含属性OnChanging事件。

您可以在功能 - > JScript - >滑块中的Features演示中找到示例。

工具提示