2012-11-13 2 views
4

PNG로 차트를 내보낼 때 파이에 범례를 추가하려고합니다. plotOptions하지만 모든 권리 효과를 제공, 기능 exportChart에서Highcharts 내보낼 때 범례 추가

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

: 다음은 내 코드입니다. PNG 파일에서 제목이 변경되고 자막 및 크레딧이 추가되지만 dataLabels 및 범례는 표시되지 않습니다.
이유를 아는 사람은 누구입니까?
누구든지 도와 줄 수 있습니까? 감사합니다.

답변

9

예 차트에서 범례를 사용하지 않도록 설정하고 내보내기 매개 변수 (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] 
      ] 
     }] 
    }); 
}); 
0

그냥 dataLabels에 enable: true을 추가해야합니다 :

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