Question

我在尝试将图表导出为PNG时在饼图上添加图例。这是我的代码：

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

在函数exportChart中，除了plotOptions之外的所有函数都会产生正确的效果。在PNG文件中，标题被更改，字幕和信用被添加，但dataLabels和图例不会出现...
谁知道为什么？
谁能帮助我？感谢

Answer 1

是的，可以通过在图表中禁用图例并导出参数（http://api.highcharts.com/highcharts#exporting.chartOptions）来将此选项设置为活动状态。

工作示例：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]
            ]
        }]
    });
});

Answer 2

对我而言，当我在导出选项中禁用导航时，它有效：

  exporting: {
    chartOptions: {
      legend: {
        navigation: {
          enabled: false
        }
      }
    }
  },

Answer 3

您应该在dataLabels中添加enable: true：

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
            }
        }
    }

Highcharts在导出时添加图例

3 个答案: