将几个HighCharts图表导出到Powerpoint幻灯片 [英] Exporting several HighCharts graphs to Powerpoint slides

问题描述

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

we are planning to build a Angular based web application which has about 15-20 different charts rendered using HighCharts. The requirement is to export those charts into PPT slides.

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

I know that HighCharts provides an export to image option. We can then embed that image in a PPT slide. We are planning to use Ruby and we have a ruby gem which does that. (We are not restricted to Ruby though, and there is one Node module which does the embed-image-in-ppt as well).

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

Now the challenge is - the client wants all the graphs to be downloaded as PPT upon a single click. This means, HighCharts would not have 'rendered' any of the graphs when the user clicked the button.

问题：我们有什么方法可以导出所有这些图表（从未呈现过，但我们可以通过这些图表获取这些图表的数据API）只需点击一下即可进入图像？

Question: Is there any way we can export all those graphs (which were never rendered, but we can get the data for those graphs via APIs) into images in one click?

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

We have thought about a few ways of doing it: 1. Load all the graphs but keep them hidden. Invoke HighCharts export function without the user knowing it and download all images and then embed them in PPT. [It sounds too inefficient to me as there might be huge graphs which might make the page too slow].

1. 使用无头浏览器，它将对图表进行伪渲染，并将它们导出到图像，然后嵌入到PPT中。 （我与之交谈的人提到PhantomJS，但我没有经验）。我们还有身份验证，如果它是无头浏览器，我们将不得不再次登录（我可能在这里错了）。

1. Use a headless browser which will pseudo-render the charts and also export them to images and then embed to PPT. (The folks I spoke to mentioned PhantomJS, but I have no experience). We also have authentication and if it's a headless browser, we'll have to login again (I can be wrong here).

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

Some sort of offline conversion and email the ppt to the user? I don't even know how this will look like in implementation.

有没有人曾经做过或有建议如何去做？

Has anyone ever done it before or have suggestions on how to go about it?

推荐答案

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

I would improve your first solution:

• 在客户端，收集Highcharts图表的选项


• 使用每个图表的选项将AJAX发送到Highcharts服务器。返回将是base64或服务器上的图像的URL


• 当所有数据将从Highcharts服务器返回时，使用另一个AJAX将URL /图像发布到您的后端


• 在你的后端（Ruby，nodeJS，无论如何）收集图像并生成PPT

• on the client side, gather options for Highcharts charts
• send AJAX to Highcharts server with options for each of the charts. Returned will be base64 or URL to the image on the server
• when all data will come back from your Highcharts server, use another AJAX to post URLs/images to your backend
• in your backend (Ruby, nodeJS, whatever) gather images and generate PPT

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

For first three steps, here is simple implementation: http://jsfiddle.net/3dptu2s3/

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

And code (Note: you don't have to load Highcharts library):

• 一些基本选项：

• some basic options:

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]
    }]
};

导出逻辑：

exporting logic:

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调用。

In fact, you can communicate by AJAX without using frontend. Use AJAX calls directly from your backend if you want to.

这篇关于将几个HighCharts图表导出到Powerpoint幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！