javascript - Highcharts 导出功能

Question

有谁知道自动创建 SVG 图表并同时导出 Highacarts 图表的 JPEG 或 PNG 图像版本的方法(最好在 $(document).ready 上)？

我想在屏幕上显示 SVG 版本并将 PNG 或 JPEG 放在隐藏的 DIV 中进行打印。

提前致谢。

Answer 1

我的解决方案会自动为我的页面/仪表板中的每个图表(在其起始状态)创建一个 SVG 的等效图像，而无需用户单独导出它们。这使得页面上的所有 Highcharts 图形和图表都能正确打印，无需用户交互。

带有 Highcharts 图表的页面无法正确打印的原因是图表是使用 SVG 制作的，而当前版本的常用浏览器不支持打印 SVG(2012 年 1 月编写)。因此，当他们这样做时，我的解决方案将变得无关紧要。

我的解决方案解决了当前的浏览器限制:

首先，我修改了Highcharts exporting.js 文件，以便自动触发通常在用户手动选择导出图像时触发的例程。

接下来，需要注意的是，当用户手动选择导出图像时，他们的请求将作为整个页面的 header 请求发送。

因此，我对导出功能的修改并没有直接POST highcharts数据，而是先将SVG和Highcharts需要的其他必要数据POST到我的页面/仪表盘中的DIV。

接收请求的每个 DIV 都包含一个 php 文件，其例程 json_encodes 从导出例程接收的 POST 数据，然后将其作为自己的 header 发送到 Highcharts 导出服务器。

因此，因为 POST 是从该 DIV 触发的，所以结果将作为该 DIV 中的 PHP 脚本的 header 直接发送回该 DIV。

一旦它被发送回那个 DIV，我保存了图像，使 DIV 仅通过 CSS 打印，并且该 DIV 的唯一 HTML 输出是带有图像文件路径的 img 标签。

我使用 $(document).ready 触发了所有 div 以填充它们的图像。

请注意，尝试此操作的其他人注意的是，我的开发服务器和实时服务器的配置不同，这意味着我必须在将其发送到 Highcharts 之前在其中一个上stripslashes JSON。

以下帖子将为尝试这样做的其他人指明正确的方向。

Saving Google Chart image to file using PHP

发布到 DIV:

Post form in JQuery and populate DIV - broken in IE