Question

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

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

现在面临的挑战是 - 客户希望只需点击一下即可将所有图表下载为PPT。这意味着，当用户点击时，HighCharts不会“渲染”任何图表。按钮。

问题：我们是否可以通过一次点击将所有这些图表（从未呈现过，但我们可以通过API获取这些图表的数据）导出到图像中？

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

使用无头浏览器，它将对图表进行伪渲染，并将它们导出到图像，然后嵌入到PPT中。（我与之交谈的人提到PhantomJS，但我没有经验）。我们还有身份验证，如果它是无头浏览器，我们将不得不再次登录（我可能在这里错了）。
某种离线转化并将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调用。

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

1 个答案: