且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-02-14 09:10:59

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

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.