将几个HighCharts图导出到Powerpoint幻灯片

Question

我们计划构建一个基于角度的web应用程序，它有大约15-20个使用HighCharts呈现的不同图表。其要求是将这些图表导出到PPT幻灯片中。

我知道HighCharts提供了一个导出到图像的选项。然后我们可以将该图像嵌入到PPT幻灯片中。我们计划使用Ruby，我们有一个红宝石，可以做到这一点。(不过，我们并不局限于Ruby，还有一个节点模块也可以实现嵌入映像。)

现在的挑战是--客户端希望所有的图形只要点击一次就被下载为PPT。--这意味着，当用户单击按钮时，HighCharts不会‘呈现’任何一个图形。

问题：有什么方法可以导出所有这些图形(这些图形从来没有呈现过，但是我们可以通过API将这些图的数据)一次单击就导出到图像中？

我们已经考虑过几种方法: 1.加载所有的图表，但将它们隐藏起来。在用户不知情的情况下调用HighCharts导出函数，下载所有图像，然后将它们嵌入到PPT中。对我来说，这听起来太低效了，因为可能会有巨大的图表，这可能会使页面太慢。

1. 使用无头浏览器，它将伪渲染图表，并将它们导出到图像，然后嵌入到PPT。(与我交谈过的人提到了PhantomJS，但我没有经验)。我们也有身份验证，如果它是一个无头浏览器，我们将不得不再次登录(我可能错了)。
2. 某种离线转换并将ppt发送给用户？我甚至不知道这在实现中会是什么样子。

以前有没有人这样做过，或者有关于如何去做的建议？

Answer 1

我会改进你的第一个解决方案：

• 在客户端，收集高级图表的选项
• 将AJAX发送到High图表服务器，并为每个图表提供选项。返回的是服务器上图像的base64或URL。
• 当所有数据都将从您的高级图表服务器返回时，请使用另一个AJAX将URL/图像发布到后端
• 在后端(Ruby、nodeJS等)收集图像并生成PPT

对于前三个步骤，下面是简单的实现：http://jsfiddle.net/3dptu2s3/

和代码(注意:您不必加载高级图表库)：

• 一些基本选择： var chartOptions ={ exporting：{ url：'http://export.highcharts.com/‘}，xAxis：{类别：'Jan’、'Feb‘、'Mar’、'Apr‘、'May’、'Jun‘、'Jul’、'Aug‘、’9‘、'Oct’、'Nov‘、'Dec’}，系列：[{ 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 } }；
• 导出逻辑： var obj ={ JSON.stringify(chartOptions)，类型：‘映像/png’，异步: true }，exportUrl = chartOptions.exporting.url，imgContainer =$(“#容器”)；var调用= []；for (var i= 0；i< 4；i++) { calls.push({ type：'post'，url: exportUrl，data: obj，})；} $.when( $.ajax(calls)，$.ajax(calls1)，$.ajax(calls2)，$.ajax(calls3) ).done(函数(c1，c2，c3，c4) ){ var urls = []；$.each(参数，函数(i，图表)){ urls.push(exportUrl +图表)；/*在这里您可以发送url到后端：$.post("url/ to /backend"，url，函数(数据){ console.log(data)；}) */ })；}；

实际上，您可以通过AJAX进行通信，而无需使用前端。如果愿意，可以直接从后端使用AJAX调用。