Highcharts: phantomjs export image missing labels

问题:

My chart is a stacked bar chart with requirements to have data labels on the actual bars.

The in browser version is working perfectly featuring the data labels accordingly, however the exported image does not have them.

Here is my code:

{
  colors: ['#0EAC55','#91C855','#F3BA0E','#F39595','#F30E0E'],
       chart: {
                type: 'bar',
                height: 195
            },
            credits: {
            enabled: false
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ['Category 1', 'Category 2', 'Category 3'],
            },
             tooltip: {
                valueSuffix: '%'
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                max: 100,
                opposite: true,
            },
            legend: {
                backgroundColor: '#FFFFFF'
            },

            plotOptions: {
                series: {
                    stacking: 'percent',
                    groupPadding: 0,
                    dataLabels: {
                    enabled: true,
                    color: '#000000'

                    }
                }
            },
                series: [{"name":"5","legendIndex":5,"data":[41.1,44.2,60.2]},{"name":"4","legendIndex":4,"data":[42.9,38.4,25.2]},{"name":"3","legendIndex":3,"data":[12.2,12,8.8]},{"name":"2","legendIndex":2,"data":[3.3,5,3]},{"name":"1","legendIndex":1,"data":[1,1,3.3]}]
    }

I am using the phantomjs server to produce images as these need to be generated on the server side. http://www.highcharts.com/component/content/article/2-articles/news/56-improved-image-export-with-phantomjs/

回答1:

I had the same problem. I tried all options above. Set all animation options to false, all defer options to false, but it didn't help me to solve the problem.

Finally I found an issue on github.com. And it was a bug of HighCharts. I was using 4.0.1 version of Highcharts.

So, the solution is just to update your highcharts file to the lastest version if the suggestions above didn't work.

My sample code can be found on jsfiddle.

回答2:

Disable all animations, and make sure you have up-to-date exporting server, not some old one.

Also, set defer options to false.

回答3:

Expanding on the answer given by Pawel Fus, I found that making sure animation was set to false did make a difference, but not the at the overall level (i.e. chart.animation = false), it had to be set on chart.plotOptions.series.animation = false.