使用一个请求导出多个图表

Question

On page I have 2 charts. They are build with Highcharts library.

I need to export them all as PNG files. So I add button, on click on which I need to have 2 separate png-files.

I have function :

myApp.highchart.export.create = function (elementId, filename) {
    var chart = $(elementId).highcharts();
    chart.exportChart({ type: 'image/png', filename: filename, sourceWidth: chart.chartWidth });
}

I pass in this function Id of every chart, but in result I always get only last chart... I try to add timeout but this doesn't help.

I took a look into Network tab in browser and always see only 1 request to http://export.highcharts.com/

Can somebody help me with it?

---

Here is example where export for 2 charts works, but in my case this also doesn't help (in example it is used some plugin highcharts-export-clientside but I use simple exporting.js)

---

UPD : I've added highcharts-export-clientside plugin, but still use highcharts method exportChart (in plugin there are exportChartLocal ). With this plugin It is possible to export multiple charts, but in png I get bad formatter chart, all my styles are broken. So I don't know what influence has this plugin when I don't use any of it methods.

---

Also seems like multiple export works in FF but not in Chrome.

---

Example of simple logic : http://jsfiddle.net/6mn2j5pL/

Answer 1

This might help you fix it.

You can use Highcharts.charts for getting array of your charts. Then you can use Highcharts.each for looping over your charts and exporting them one after other.

http://forum.highcharts.com/highcharts-usage/how-to-export-multiple-charts-to-separate-image-files-t35191/

Solution provided in this forum seems to be working on chrome as well.