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

Question

我们计划构建一个基于Angular的web应用程序，该应用程序使用HighCharts渲染大约15-20个不同的图表。要求将这些图表导出为PPT幻灯片。

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

现在的挑战是，客户希望所有的图表都能在点击后以PPT的形式下载这意味着，当用户单击按钮时，HighCharts不会"渲染"任何图形。

问题：有没有办法将所有这些图（从未渲染过，但我们可以通过API获得这些图的数据）一次性导出到图像中？

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

2. 使用无头浏览器，它将伪渲染图表，并将其导出为图像，然后嵌入到PPT中。（与我交谈过的人提到了PhantomJS，但我没有经验）。我们还有身份验证，如果是无头浏览器，我们必须再次登录（我可能错了）。

3. 某种离线转换并通过电子邮件将ppt发送给用户？我甚至不知道在实现中会是什么样子。

以前有人做过这件事吗？或者对如何做有建议吗？

Answer 1

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

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

对于前三个步骤，这里有一个简单的实现：http://jsfiddle.net/3dptu2s3/

代码（注意：您不必加载Highcharts库）：

• 一些基本选项：

  var chartOptions = {
      exporting: {
          url: 'http://export.highcharts.com/'
      },
      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      series: [{
          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 = {
          options: JSON.stringify(chartOptions),
          type: 'image/png',
          async: true
      },
      exportUrl = chartOptions.exporting.url,
      imgContainer = $("#container");
  var calls = [];
  for (var i = 0; i < 4; i++) {
      calls.push({
          type: 'post',
          url: exportUrl,
          data: obj,
      });
  }
  $.when(
      $.ajax(calls[0]),   
      $.ajax(calls[1]),
      $.ajax(calls[2]),
      $.ajax(calls[3])
  ).done(function (c1, c2, c3, c4) {
      var urls = [];
      $.each(arguments, function(i, chart) {
          urls.push(exportUrl + chart[0]);
          /*
              Here you can send URLs to the backend:
              $.post("url/to/backend", urls, function(data) {
                  console.log(data);
              })
          */
      });
  });
  

事实上，您可以在不使用前端的情况下通过AJAX进行通信。如果需要，可以直接从后端使用AJAX调用。