Highcharts 导出功能

Posted 2023-05-07

【中文标题】Highcharts 导出功能

【英文标题】：Highcharts exporting functionality

【发布时间】：2011-12-10 02:11:06

【问题描述】：

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

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

提前致谢。

【问题讨论】：

好的，使用php我可以保存导出模块生成的图像并轻松访问，如this related post所述。

现在我需要找出 Highcharts 使用的 URI。有什么想法吗？

你看过highchartsexporting module explanation吗？

是的，它没有提供我需要的功能。

我认为您想要实现的目标已经存在 - highslide.com/forum/…。此演示 highcharts.com/demo - 显示打印和保存按钮。

【参考方案1】：

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

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

我的解决方案绕过了当前的浏览器限制：

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

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

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

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

因此，由于 POST 是从该 DIV 触发的，因此结果会直接发送回该 DIV，作为该 DIV 中 PHP 脚本的标头。

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

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

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

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

Saving Google Chart image to file using PHP

发布到 DIV：

Post form in JQuery and populate DIV - broken in IE