Highcharts add legend on export

2019-06-25 12:01发布

I'm trying to add a legend on a pie when exporting the chart as PNG. Here is my code :

var chart_23_106;
$(document).ready(function () {
chart_23_106 = new Highcharts.Chart({
    chart: { type: 'pie', renderTo: 'container_23_106', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false },
    title: { text: 'NRJ' },
    tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 },
    plotOptions: {
        pie: { borderWidth: 0, shadow: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false } }
    },
    colors: ['#9F9F9F','#BE6EBE','#FFA74F','#B7B7D0','#CBE22A','#00C8C8'],
    credits: { enabled: false, text: "Source: Air Normand", href: "" },
    exporting:{ buttons: {
            printButton: {enabled:false},
            exportButton: {menuItems:null,onclick:function(){this.exportChart(null, 
                                        { chart: {reflow: false, width: 400}, 
                                          title: {text: "Répartition de la Consommation"}, 
                                          subtitle: {text: "Haute-Normandie"}, 
                                          plotOptions: {pie: {dataLabels: {enabled: true}, showInLegend: true}}, 
                                          credits: {enabled: true} }
                                    );}}
    }},
    lang: {exportButtonTitle: "Export image au format PNG"},
    series: [{
        type: 'pie',
        name: 'Proportion',
        data: [
        ['Activite 1',   684.6],
        ['Activite 2',   564.7],
        ['Activite 3',   244.4],
        ['Activite 4',   42.8],
        ]
    }]
});
});

In the function exportChart, all but the plotOptions gives the right effect. In the PNG file, the title is changed, subtitle and credits are added, but the dataLabels and the legend don't appear...
Anyone knowing why ?
Could anyone help me ? Thanks

3条回答
姐就是有狂的资本
2楼-- · 2019-06-25 12:39

you just should add enable: true in dataLabels:

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
            }
        }
    }
查看更多
等我变得足够好
3楼-- · 2019-06-25 12:57

Yes it is possible by disabling legend in chart and in exporting parameters (http://api.highcharts.com/highcharts#exporting.chartOptions) set this option as active.

Working example: http://jsfiddle.net/xvQNA/

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        legend:{
            enabled:false
        },
        exporting:{
            chartOptions:{
                legend:{
                    enabled:true
                }
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            showInLegend:true,
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
查看更多
干净又极端
4楼-- · 2019-06-25 13:03

For me it worked when i disabled the navigation in the exporting options :

  exporting: {
    chartOptions: {
      legend: {
        navigation: {
          enabled: false
        }
      }
    }
  },
查看更多
登录 后发表回答