将多个 HighCharts 图表导出到 Powerpoint 幻灯片

Question

我们计划构建一个基于 Angular 的 Web 应用程序，其中包含使用 HighCharts 呈现的大约 15-20 个不同的图表。需求是把那些图表导出成PPT幻灯片。

我知道 HighCharts 提供导出到图像选项。然后我们可以将该图像嵌入到 PPT 幻灯片中。我们计划使用 Ruby 并且我们有一个 ruby gem 可以做到这一点。（不过我们并不局限于 Ruby，还有一个 Node 模块也可以执行 embed-image-in-ppt）。

现在的挑战是 - 客户希望单击一次即可将所有图表下载为 PPT。 这意味着，HighCharts 不会 'rendered' 任何用户单击按钮时的图表。

问题：有什么方法可以一键导出所有这些图（从未渲染过，但我们可以通过API获取这些图的数据）到图像中？

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

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

有没有人以前做过或对如何去做有建议？

Answer 1

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

在客户端，收集 Highcharts 图表的选项
发送 AJAX 到 Highcharts 服务器，其中包含每个图表的选项。返回的将是 base64 或 URL 到服务器上的图像
当所有数据将从您的 Highcharts 服务器返回时，使用另一个 AJAX 到 post URLs/images 到您的后端
在您的后端（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 调用。

将多个 HighCharts 图表导出到 Powerpoint 幻灯片

Exporting several HighCharts graphs to Powerpoint slides

javascript

ruby

powerpoint

highcharts

angularjs