量化交易软件:HTML 中的图表

简介

赫兹量化很有可能是一个完全自给自足的产品,并不需要额外的扩展。赫兹量化提供与经纪人的连接,显示报价,允许我们使用各种各样的指标来进行市场分析,当然,还使交易者有机会进行交易操作。显然,因为赫兹量化主要专注于轻松交易,它不能——在技术上也不应该是一个专为数学方法的研究、分析以及多媒体内容的创建等而设计的绝对通用的工具。

此外,软件产品的过度通用性也最终会导致其效率、可靠性和安全性的降低。另一方面,在某些情形下,用户可能需要某些额外的功能,尤其是交易者为具有各个领域的专业知识和教育背景的人。因此,任何额外的功能可能提高交易平台的吸引力,当然,如果它们是以非常简单的方式实现的,并且没有以其可靠性和安全性为代价的话。

在本文中,我们将考虑此类补充中的一种,这种补充提供依据从客户端获得的数据创建和显示图表的机会。

每个程序都必须做最其擅长的事情。如果我们遵守此原则,则让我们使赫兹量化负责与经纪人进行交易,收集和处理收到的信息,并使用另一个针对这些用途的程序来负责信息的图形显示。

编辑切换为居中

添加图片注释,不超过 140 字(可选)

WEB 浏览器

现今很难找到一台没有安装 Web 浏览器的计算机。长久一来,浏览器一直在进化和改进。现代浏览器的运行相当可靠、稳定,并且最重要的是——免费。考虑到 WEB 浏览器实际上是访问互联网的基本工具,大多数用户都熟悉它,在使用它时几乎不会遇到什么困难。

现代浏览器的用途是如此之广,以至于我们已经习惯通过 Web 浏览器来观看视频、聆听音乐、玩游戏以及进行很多其他活动。因此,现今 WEB 浏览器是一个完善的工具,用于显示能够以各种格式表示的不同类型的信息。

必须指出,目前有几个非常流行的 WEB 浏览器:InternetExplorer、Mozilla Firefox、Google Chrome 和 Opera。这些浏览器相互之间在软件实施和用户界面方面可能有显著不同。然而在理论上,它们应完全支持在网络中采用的针对信息交换的基本标准,主要涉及 HTML 语言标准。

在实践中,尽管开发人员都很努力,浏览器在实施某些协议或技术方面仍然有某些个性。如果我们确定某个浏览器因为其特性而不适合我们,则可以通过向我们的计算机安装一个或几个其他 WEB 浏览器来轻松地解决此问题。即使对 Firefox 等浏览器狂热支持的人在他们的系统中同时也至少安装有 Internet Explorer。

尽管 WEB 浏览器是作为客户端开发的,提供与远程服务器的互动,但是它们也可用于显示存储在您的计算机中的本地信息。查看以前保存在您的计算机中的 WEB 页面即是这样的例子。浏览器不需要接入互联网就可显示本地页面。

因此,运行在离线模式下的 WEB 浏览器,对于用于扩展 赫兹量化客户端的图形能力的程序而言,是一个非常有吸引力的候选角色。要使用它,您既不需要购买昂贵的浏览器、进行麻烦和冗长的安装,也不需要学习如何使用新的软件产品。

因此,在本文的后面,我们将讨论使用 WEB 浏览器,依据在 赫兹量化 中获得的数据构建图表。

HTML 和 JavaScript

通过选择 WEB 浏览器作为我们的扩展,让我们为自己制定一个我们将严格遵守的基本原则 - 创建的 HTML 页面的显示必须在没有本地或远程 WEB 服务器的情况下进行。即我们不会在我们的计算机上安装任何服务器软件,并且显示我们的页面不需要接入网络。我们创建的 HTML 页面应只能通过 WEB 浏览器显示,并且应位于我们的计算机上。此原则将最大程度地减少与因接入外部网络而可能导致的安全性能下降有关的风险。

仅使用 HTML 4 的功能来进行信息显示,我们可以创建具有表格、格式化文本和图像的 WEB 页面,但是这些机会并不能让我们完全满意,因为我们的目标是依据从 赫兹量化 收到的数据创建完善的图表。

在大多数情形下,当前往不同的网站时我们在浏览器中看到的内容是使用 HTML 扩展创建的。一般而言,这些扩展在服务器端执行,因此不符合我们的目的。能够在浏览器端工作并且不需要服务器软件的技术,例如 Macromedia Flash、JavaScript 和 Java,可能会让我们产生兴趣。

如果要在浏览器端执行 Macromedia Flash 和 Java 应用,我们至少需要安装额外的插件,而用 JavaScript 编写的用户程序由浏览器直接执行的。所有常见的 WEB 浏览器都有它们自己的内置 JavaScript 解释程序。为了避免安装任何额外的软件或插件,让我们选择 JavaScript。

因此,在后文中,我们将仅使用支持 MQL5 的 赫兹量化以及支持 HTML 和 JavaScript 的 WEB 浏览器。不需要其他软件。应指出,HTML 页面仅仅是文本文件。因此,要创建 HTML 文档,我们可以使用任何文本编辑器。例如,我们可以在赫兹量化中创建和编辑 HTML 代码。在撰写本文时,HTML 代码的编辑是在 Opera @ USB v10.63 浏览器中进行的,该浏览器允许您编辑页面内容,保存修改后的页面,以及预览显示结果。

不熟悉 HTML 和 JavaScript 语言的人可能担心会在掌握它们时遇到某些困难。为了有利于我们的任务,并且避免深入学习 HTML 和 JavaScript,我们将尝试使用以此技术为基础的现成解决方案。因为在本文的范围内,我们的目标仅限于构建图表,因此我们将使用专为此目的而编写好的现成 JavaScript 库。

Emprise JavaScript Charts 是一个相当先进的图形库。或许读者有兴趣通过提供的链接更好地掌握它,但是这个图形库并不是完全免费的。因此,让我们转向免费的库,例如 Dygraphs JavaScript Visualization Library 和 Highcharts charting library。Dygraphs 因其简洁而极具吸引力,而 Highcharts 库包含大量的功能,看起来更加通用。尽管 Highcharts 库大约有 75 KB,并且需要额外的 jQuery 库,该库大约有 70 KB,我们仍然选其作为我们的库。

您可以在我们的网站 http://www.highcharts.com/ 上的 "Demo Gallery" 部分熟悉 Highcharts 库。对于每个示例,您可以通过单击 "View options"(查看选项)来查看其 JavaScript 源代码。有关库的详细说明位于 "Documentation/Options Reference"(说明文档/选项参考)部分,在这个部分中,您还可以找到使用不同选项的很多例子。因为 JavaScript 代码的丰富性以及与 MQL 编程器语法的不同,此库的使用似乎相当复杂。但事实并非如此。考虑简单 HTML 文件的第一个例子,该文件采用库来显示图表。

作为一个例子,让我们在 Notepad 编辑器中创建一个名为 Test_01.htm 的文本文件,并复制以下使用库的简单例子。

 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Example</title> <!-- - --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="/js/highcharts.js" type="text/javascript"></script> <!-- - --> <script type="text/javascript"> var chart1; $(document).ready(function(){ chart1 = new Highcharts.Chart({ chart: {renderTo: 'container1'}, series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}] }); }); </script> <!-- - --> </head> <body> <div id="container1" style="width: 700px; height: 400px "></div> </body> </html>

示例代码被注释分为四个部分。

第一部分,代码的顶部包含普通的 HTML 页面标记。目前,我们对此部分的代码没有特别兴趣。

接着是另一部分,这部分包含两个 <script> 标记。在第一个标记中,我们向浏览器发出一个指令,要求从网站 ajax.googleapis.com 下载库代码 jquery.min.js。第二个标记假定在服务器端,目录 /js/ 包含浏览器必须下载的库 highcharts.js。以前已经决定,在显示我们的页面时不应连接到任何外部资源,因此必须更改这部分的代码。

在更改之后,这部分的代码如下所示

 
 

<script src="jquery.min.js" type="text/javascript"></script> <script src="highcharts.js" type="text/javascript"></script>

在代码的下一部分创建了 Highcharts.Chart 类的一个对象。参数 "renderTo:'container1'" 指出图表将显示在名为 "container1" 的 HTML 元素中,参数 "data" 定义要显示在图表中的数据。如我们在本例中所见,数据的定义方式与参数相同 - 在创建 Highcharts.Chart 类的对象期间。通过简单的更改,我们将显示数据的定义放到一个单独的代码部分,这样允许我们在需要显示多个图表时能够对它们的数据分组。

在我们的例子的最后一部分,标记 <div> 声明一个名为 "container1" 的 HTML 元素,并且指出此元素的尺寸。如前文所述,这是将用于构建图表的 HTML 元素,其大小由在标记 <div> 中指定的元素 "container1" 的尺寸确定。

考虑到所做的更改之后,我们的示例代码如下所示:

 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Example</title> <!-- - --> <script src="jquery.min.js" type="text/javascript"></script> <script src="highcharts.js" type="text/javascript"></script> <!-- - --> <script type="text/javascript"> var dat1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]; </script> <!-- - --> <script type="text/javascript"> var chart1; $(document).ready(function(){ chart1 = new Highcharts.Chart({ chart: {renderTo: 'container1'}, series: [{data: dat1}] }); }); </script> <!-- - --> </head> <body> <div id="container1" style="width: 700px; height: 400px "></div> </body> </html>

可以从文末的附件复制此测试案例和所有库。Test_01.htm 示例文件以及库文件位于相同的 \Test 文件夹中,因此,我们只需要双击 HTML 文件 Test_01.htm 即可查看我们的工作成果。

必须记住,要正常显示此测试页面,应在 WEB 浏览器中允许 JavaScript 的执行。因为出于安全目的,浏览器允许您禁用此选项,它有可能被关闭。如此一来,我们应能看到下图:

编辑

添加图片注释,不超过 140 字(可选)

图 1. Test_01.htm

这是我们的第一个测试图表,尽管此技术表面上很复杂,但是其创建并不需要太长的时间。

我们应指出以此方式创建的显示图表的某些特点。在复制的目录中,打开文件 Test_01.htm,如果 WEB 浏览器允许您放大查看的页面,您将发现,即使放大很多倍,图表的质量也不会变差。

这是因为此图表不是诸如 PNG 或 JPEG 文件等静态图像,在放大或缩小为其绘图分配的区域后会重绘图像。因此,此类图像不能用我们通常喜欢的图片保存方式保存到磁盘。因为图表是采用 JavaScript 创建的,我们必须指出,不同的浏览器具有它们自己的对该语言的内置解释程序,可能并不始终都是按相同的方式执行程序。

使用 JavaScript 创建的图表在使用不同的浏览器查看时可能会有所不同。大多数情况下,与其他浏览器相比,这些差异最常出现在 Internet Explorer 中。

但是我们希望 JavaScript 库的创建者能够考虑让他们的代码与最流行的 WEB 浏览器具有可能的最大兼容性。

赫兹量化和 MQL5

在以上例子中,要在图表中显示的数据是在创建 HTML 页面期间手动设定的。为了安排将数据从赫兹量化传输到创建的图表,我们使用最简单的方法。让赫兹量化 将数据记录到一个单独的文件,然后在显示图表时从该文件将数据载入浏览器。让我们编写一个包含 HTML 页面的例子,该例子通过从一个文件和 MQL5 中创建此文件的脚本下载数据,从而显示图表。

对于 HTML 文件,我们将使用以前创建的文件 Test_01.htm(先对其进行一些小的更改)。我们将修改后的文件称为 example1.htm。做出的更改将会减少,因为以下代码行:

 
 

<script type="text/javascript"> var dat1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]; </script>

将被替换为

 
 

<script type="text/javascript"> var dat1=[0]; </script> <script src="exdat.txt" type="text/javascript"></script>

现在,浏览器在下载 HTML 页面时也需要下载 exdat.txt 文本文件,在该文件中,要显示在图表中的值将被赋予 dat1 数组。此文件应包含一段 JavaScript 代码。可以使用对应的脚本在赫兹量化中轻松创建此文件。

以下提供了此类脚本的一个例子。

 
 

//+------------------------------------------------------------------+ //| Example1.mq5 | //| Copyright 2010, MetaQuotes Software Corp. | //| https://www.mql5.com | //+------------------------------------------------------------------+ #property copyright "Copyright 2010, MetaQuotes Software Corp." #property link "https://www.mql5.com" #property version "1.00" //+------------------------------------------------------------------+ //| Script program start function | //+------------------------------------------------------------------+ void OnStart() { int i,n,fhandle; double gr[25]; string str; n=ArraySize(gr); for(i=0;i<n;i++) { gr[i]=NormalizeDouble(MathSin(i*3*2*M_PI/n),4); } str=DoubleToString(gr[0],4); for(i=1;i<n;i++) { str+=","+DoubleToString(gr[i],4); } ResetLastError(); fhandle=FileOpen("exdat.txt",FILE_WRITE|FILE_TXT|FILE_ANSI); if(fhandle<0){Print("File open failed, error ",GetLastError());return;} FileWriteString(fhandle,"dat1=["+str+"];\n"); FileClose(fhandle); } //+------------------------------------------------------------------+

为了存储显示的数据,此脚本使用容纳 25 个元素的 gr[] 数组。作为一个例子,此数组被填以正弦函数的值,并且四舍五入到四位小数。当然,此数组也可以被填以任何其他更加有用的数据。

此外,此数据被格式化并组合为一个文本字符串。为了减小生成的文本文件的大小,仅将 gr[] 数组元素精确到四位小数的值放置到字符串。为此,我们使用 DoubleToString() 函数。

组合文本字符串 str 之后,将其存储到 exdat.txt 文件中。如果成功执行此脚本,将在客户端的 \MQL5\Files 子文件夹中创建 texdat.txt 文本文件;如果该文件已经存在,则会被覆盖。

本文末尾的附件部分提供了 jquery.min.js、highcharts.js、Example1.mq5、Example1.htm 和 exdat.txt 文件。这五个文件位于目录 \Example1 中。要简单地查看结果,只需要复制此示例,并在目录 \Example1 中打开文件 Example1.htm。将依据来自 exdat.txt 文件的数据建立图表。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值