提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:况鱼杰|2019-08-09 10:11:14.850|阅读 326 次
概述:本教将会介绍如何在客户端页面上创建静态和实时HTML5图表。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
TeeChart for PHP包含100%的PHP源代码。它支持PHP5及更高的版本。它可作为一个调色板组件整合到针对PHP的Delphi编程环境中,从而让其他人在运行时以创建组件的方式来引用。第一个版本提供17种图表类型(2D和3D的多种组合),11个数学函数和一些图表工具组件以扩展功能。
本教程是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演示中找到示例。
工具提示
工具提示工具是许多类型图表的必备工具。它允许您在鼠标光标的点经过指定点时显示包含文本的标签(例如值),当光标离开同一点上方的极点时,又使其消失,并隐藏以远离该点。
这允许我们为OnShow事件分配不同的值,并使用相同的属性为OnGetText OnHide分配。
您可以在功能 - > JScript - >工具提示中的Features演示中找到示例。
使用自定义代码增强页面上的图表
由于PHP版本允许我们轻松地将javascript代码添加到我们的页面,添加对teechart.js的引用后,就可以为我们提供使用javascript改进或自定义我们的javascript图表的选项。
在TeeChart for PHP文件夹Docs中,您将找到TeeChart javascript的必要文档,以及开发人员希望在其页面中使用jscript代码的函数。
TeeChart for PHP教程到这里就结束了,你可以点击此处跳转到teechart资源的合集,寻找适合你的资源。
TeeChart for .NET,TeeChart for JavaScript/HTML5,TeeChart for Xamarin.Android均已加入在线订购,现在抢购可立享特别优惠!!!
关注慧聚IT微信公众号☟☟☟,了解产品的最新动态及最新资讯。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢