Highcharts导出功能

时间:2011-10-18 12:59:59

标签: javascript jquery highcharts

是否有人知道如何自动创建SVG图表,同时导出Highacarts图表的JPEG或PNG图像版本(最好是$(document).ready)?

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

提前致谢。

1 个答案:

答案 0 :(得分:3)

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

具有Highcharts图表的页面无法正确打印的原因是因为图表是使用SVG制作的,并且当前版本的常见浏览器不支持打印SVG(2012年1月编写)。因此,我的解决方案无关紧要。

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

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

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

因此,我对导出功能的修改不直接POST高位图数据,而是首先将SVG和Highcharts在页面/仪表板中需要的其他必要数据发送到DIV。

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

因此,因为POST是从该DIV触发的,所以结果会直接发送回该DIV,作为该DIV中PHP脚本的标题。

一旦将其发送回DIV,我保存了图像,仅通过CSS制作DIV打印,该DIV的唯一HTML输出是带有图像文件路径的img标记。

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

其他任何人尝试这个的一个注意事项是我的dev和live服务器的配置不同,这意味着在将其发送到Highcharts之前,我必须在其中一个上使用stripslashes JSON。

以下帖子将指向其他任何尝试以正确方向执行此操作的人。

Saving Google Chart image to file using PHP

发布到DIV:

Post form in JQuery and populate DIV - broken in IE