HTML 中的图表（基础篇）
MT5 网页图表的历史切片
MetaTrader 5 的网页端图表能力并非新事物。早在 2014 年 1 月 8 日 09:45，社区中就有一篇关于 HTML 图表的示例被发布，累计获得 5076 次查看与 16 条讨论，作者署名为 Victor。 这一数据点说明：在 MT5 原生网页嵌入与第三方 HTML 图表混合展示的早期阶段，交易者已经在探索把行情视图搬出桌面终端的可能性。外汇与贵金属杠杆交易本身高风险，这类早期尝试更多是为自定义看板打底，而非信号结论。 如果你现在打开 MT5 终端，仍可在「工具—选项—通知/网页」相关配置里回溯当时社区示例留下的嵌入思路，验证网页图表与终端图表的渲染差异。
「为什么要把画图交给外部程序」
MT5 本身已经能连经纪商、刷报价、挂指标并下单，从产品定位看它本就不该做成万能数学与多媒体工作站。把过多异构功能塞进一个终端，往往换来效率、可靠性和安全性的同步下滑。 实际交易中，用户背景差异很大：有人懂统计、有人做过音视频、有人熟悉数据可视化。若能以极低成本给平台补上某些专项能力，且不牺牲原有稳定与风控，平台吸引力才可能提升。 一个务实思路是职责分离：让 MT5 专心做它最擅长的——对接经纪商、收数据、执行交易；而把基于这些数据的图表创建与渲染，交给更合适的外部程序处理。这样两边各做各的强项。
◍ 把浏览器当 MT5 的离线图表外挂
每台装了 MT5 的电脑基本都自带浏览器，IE、Firefox、Chrome、Opera 这几款在界面和底层实现上差异明显，但理论上都遵循 HTML 标准，能渲染多种格式信息。对交易者来说，关键点在于：浏览器原生支持离线打开本地页面，不联网也能显示内容，这让它成了扩展 MetaTrader 5 图形能力的现成载体。 你不需要额外买授权、走冗长安装流程，也不用学新软件——系统里那个免费浏览器就能用。哪怕只装了 Firefox 的偏执用户，机器里往往也还躺着 IE 作为保底。 后面我们会基于 MT5 实时取出的数据，用浏览器在离线模式下画图。外汇与贵金属波动剧烈、杠杆高风险大，这类本地图表只作辅助观察，信号可靠性需你自己在终端里验证。
浏览器端零服务器跑图表的技术选型
做 MT5 外接图表，第一条铁律是本地离线：HTML 页面不依赖任何本地或远程 WEB 服务器，文件放本机、双击即用。这能最大限度压掉因联网带来的安全暴露面，对外汇和贵金属这类高波动品种的数据终端尤其实在。 纯 HTML 4 只能排表格和静态图，撑不起从 MetaTrader 5 实时抽数画的完善图表。浏览器端能跑且免装插件的技术里，Flash 和 Java 都要额外组件，只有 JavaScript 是各大浏览器内置解释器直接执行——所以锁定 JS，配合 MT5 的 MQL5 输出就够了。 图形库挑免费的。Dygraphs 轻巧但功能薄，Highcharts 约 75 KB 外加约 70 KB 的 jQuery，虽重但通用性强，最终选它。Highcharts 官网的 Demo Gallery 里每个样例点 'View options' 就能扒到 JS 源码，上手比想象中快。 原文示例里库是从 ajax.googleapis.com 和 /js/ 远程拉的，违背离线原则。改成本地相对路径后，只需把 jquery.min.js 和 highcharts.js 拷到 Test_01.htm 同目录，双击 HTML 即可出图。 [CODE] 段里的脚本分四块：头部是标准 HTML 4.01 声明与 meta 编码；两个 <script> 原指向外部 CDN 和 /js/ 目录，需改为本地文件；Highcharts.Chart 对象用 renderTo:'container1' 绑定 div，series 里直接写死 12 个数据点；最后 <div id="container1"> 定 700x400 画布。逐行看，第 1 行声明 HTML4 严格文档类型；第 4 行设 utf-8 防乱码；第 7–10 行原远程库引用是离线红线，必须换成同目录的 "jquery.min.js"；第 13–19 行 $(document).ready 里 new Highcharts.Chart，chart 参数挂容器，series 数组 [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 就是纵坐标样本；末行 <div> 给容器尺寸，图表矢量重绘，放大不糊。 这类 JS 图表是矢量实时绘制，不是 PNG/JPEG，放大不降质但也不能右键存图。不同浏览器内置 JS 引擎有差异，Internet Explorer 最容易跑偏，MT5 终端验证时建议用 Chrome 或 Opera 看效果。
<span class="doctype"><!DOCTYPE HTML PUBLIC "-class=class="str">"cmt">//W3C//DTD HTML class="num">4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span> <span class="tag"><<span class="keyword">html</span>></span> <span class="tag"><<span class="keyword">head</span>></span> <span class="tag"><<span class="keyword">meta</span><span class="attribute"> http-equiv=<span class="value">"Content-Type"</span></span><span class="attribute"> content=<span class="value">"text/html; charset=utf-class="num">8"</span></span>></span> <span class="tag"><<span class="keyword">title</span>></span>Example<span class="tag"></<span class="keyword">title</span>></span> <span class="comment"><!-- - --></span> <span class="tag"><<span class="keyword">script</span><span class="attribute"> src=<span class="value">"http:class=class="str">"cmt">//ajax.googleapis.com/ajax/libs/jquery/class="num">1.4.class="num">4/jquery.min.js"</span></span> <span class="attribute"> type=<span class="value">"text/javascript"</span></span>></span><span></span><span class="tag"></<span class="keyword">script</span>></span> <span class="tag"><<span class="keyword">script</span><span class="attribute"> src=<span class="value">"/js/highcharts.js"</span></span><span class="attribute"> type=<span class="value">"text/javascript"</span></span>></span><span></span><span class="tag"></<span class="keyword">script</span>></span> <span class="comment"><!-- - --></span> <span class="tag"><<span class="keyword">script</span><span class="attribute"> type=<span class="value">"text/javascript"</span></span>></span><span> var chart1; $(document).ready(function(){ chart1 = new Highcharts.Chart({ chart: {renderTo: &class="macro">#x27;container1&class="macro">#x27;}, series: [{data: [class="num">29.9, class="num">71.5, class="num">106.4, class="num">129.2, class="num">144.0, class="num">176.0, class="num">135.6, class="num">148.5, class="num">216.4, class="num">194.1, class="num">95.6, class="num">54.4]}] }); }); </span><span class="tag"></<span class="keyword">script</span>></span> <span class="comment"><!-- - --></span> <span class="tag"></<span class="keyword">head</span>></span> <span class="tag"><<span class="keyword">body</span>></span> <span class="tag"><<span class="keyword">div</span><span class="attribute"> id=<span class="value">"container1"</span></span><span class="attribute"> style=<span class="value">"width: 700px; height: 400px "</span></span>></span><span class="tag"></<span class="keyword">div</span>></span> <span class="tag"></<span class="keyword">body</span>></span> <span class="tag"></<span class="keyword">html</span>></span> <span class="tag"><<span class="keyword">script</span><span class="attribute"> src=<span class="value">"jquery.min.js"</span></span><span class="attribute"> type=<span class="value">"text/javascript"</span></span>></span><span class="tag"></<span class="keyword">script</span>></span>
「把 MT5 导出的数列直接丢进网页图表」
想在 MT5 之外快速看一眼月度波动分布，不一定非得开终端里的图表。把 EA 或脚本吐出的数值先存成 JS 数组，用 Highcharts 这类前端库就能在浏览器里渲染，省去反复切窗口的麻烦。
下面这段 HTML 把 12 个样本值写死在 dat1 里，范围从 29.9 到 216.4，对应的是某品种 12 根 K 线的某种度量（如点数差或成交量缩放值）。在 $(document).ready 里实例化图表并绑定到 container1 的 div，页面加载完即出图。
这种法子的局限也很明显：数据是静态写死的，不会随行情刷新。真要盯盘，还是得让 MT5 侧通过文件或本地接口把新数组推过来，否则图表只是回看工具。外汇与贵金属杠杆高，任何离线图表都只是辅助，实盘前务必在 MT5 里用实时数据复核。
<script src="highcharts.js" type="text/javascript"></script> <!DOCTYPE HTML PUBLIC "-class=class="str">"cmt">//W3C//DTD HTML class="num">4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-class="num">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 = [class="num">29.9, class="num">71.5, class="num">106.4, class="num">129.2, class="num">144.0, class="num">176.0, class="num">135.6, class="num">148.5, class="num">216.4, class="num">194.1, class="num">95.6, class="num">54.4]; </script> <!-- - --> <script type="text/javascript"> var chart1; $(document).ready(function(){ chart1 = new Highcharts.Chart({ chart: {renderTo: &class="macro">#x27;container1&class="macro">#x27;}, series: [{data: dat1}] }); }); </script> <!-- - --> </head> <body> <div id="container1" style="width: 700px; height: 400px "></div> </body> </html>
◍ MetaTrader 5 和 MQL5
在以上例子中，要在图表中显示的数据是在创建 HTML 页面期间手动设定的。为了安排将数据从 MetaTrader 5 传输到创建的图表，我们使用最简单的方法。让 MetaTrader 5 将数据记录到一个单独的文件，然后在显示图表时从该文件将数据载入浏览器。让我们编写一个包含 HTML 页面的例子，该例子通过从一个文件和 MQL5 中创建此文件的脚本下载数据，从而显示图表。 对于 HTML 文件，我们将使用以前创建的文件 Test_01.htm（先对其进行一些小的更改）。我们将修改后的文件称为 example1.htm。做出的更改将会减少，因为以下代码行： 将被替换为 现在，浏览器在下载 HTML 页面时也需要下载 exdat.txt 文本文件，在该文件中，要显示在图表中的值将被赋予 dat1 数组。此文件应包含一段 JavaScript 代码。可以使用对应的脚本在 MetaTrader 5 中轻松创建此文件。 以下提供了此类脚本的一个例子。 为了存储显示的数据，此脚本使用容纳 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 文件的数据建立图表。 图 2. Example1.htm 当然，要运行 Example1.mq5 脚本，该脚本应位于客户端的 \MQL5\Scripts 文件夹中并经过编译。 如前文所述，在启动脚本之后，将在 \MQL5\Files 文件夹中创建 exdat.txt 文件，但是在我们的例子中，HTML 文件、来自库的文件以及数据文件都必须位于同一文件夹中。因此，我们必须将文件 jquery.min.js、highcharts.js 和 Example1.htm 复制到 \MQL5\Files 文件夹，或将 exdat.txt 文件复制到这些文件所在的文件夹。 在本例中，HTML 页面和库存储在不同的文件中。在设计阶段，项目的不同部分位于单独的文件中可能会有用处。例如，这样有助于避免在编辑 HTML 文件时，库的代码出现随机变化。但是在编辑完毕 HTML 页面并且不再进行进一步更改之后，库将直接整合到 HTML 代码文件。 这是有可能的，因为 JavaScript 库只是简单的文本文件。如果我们用一个文本编辑器打开 jquery.min.js 或 highcharts.js，我们会看不到任何能理解的东西，因为库的源代码被最大可能地压缩。 压缩是通过删除服务符号，例如换行符或一系列的空格进行的。经过此类压缩之后，任何格式都已丢失，但是文本仍然保留为文本，因为文件的类型没有改变。因此，无论浏览器是从带有 e