Экспорт высоких диаграмм: невозможно экспортировать отображаемые цвета дуги

Question

Я использую полярную диаграмму с линией диаграммного типа и цветами рендеринга в нее после создания диаграммы.

При экспорте диаграммы в виде png, svg и т. Д. Отображаемые цвета не отображаются в экспортируемой диаграмме.

Есть ли способ сохранить отображаемые цвета на экспортируемой диаграмме?

$(function() { 
 
    
 
    var chart = new Highcharts.Chart({ 
 
\t  chart: { 
 
\t   polar: true, 
 
      renderTo: 'container' 
 
\t  }, 
 
\t  title: { 
 
\t   text: 'Highcharts Polar Chart' 
 
\t  }, 
 
\t  pane: { 
 
\t   startAngle: 0, 
 
\t   endAngle: 360 
 
\t  }, 
 
\t  xAxis: { 
 
\t   tickInterval: 45, 
 
\t   min: 0, 
 
\t   max: 360, 
 
\t   labels: { 
 
\t   \t formatter: function() { 
 
\t   \t \t return this.value + '°'; 
 
\t   \t } 
 
\t   } 
 
\t  }, 
 
\t  yAxis: { 
 
\t   min: 0, 
 
      tickInterval: 2, 
 
      showLastLabel: true 
 
\t  }, 
 
\t  plotOptions: { 
 
\t   series: { 
 
\t    pointStart: 0, 
 
\t    pointInterval: 45 
 
\t   }, 
 
\t   column: { 
 
\t    pointPadding: 0, 
 
\t    groupPadding: 0 
 
\t   }, 
 
      line: { 
 
      \t \t pointPlacement: "between", 
 
       dataLabels: { 
 
        allowOverlap: true, 
 
        enabled: true 
 
       } 
 
      } 
 
\t  }, 
 
\t  series: [{ 
 
\t   type: 'line', 
 
\t   name: 'Line', 
 
\t   data: [1, 2, 3, 4, 5, 6, 7, 8] 
 
\t  }] 
 
\t }); 
 
    
 
    var colors = ["#058DC7", "#50B432", "#ED561B", "#DDDF00", "#24CBE5", "#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1", "#696969", "#64E572", "#FF9655", "#FFF263", "#6AF9C4"];  
 
    var parts = 8; 
 
    
 
    for(var i = 0; i < parts; i++) { 
 
     chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
 
          chart.plotTop + chart.yAxis[0].center[1], 
 
          chart.yAxis[0].height, 
 
          0, 
 
          -Math.PI + (Math.PI/(parts/2) * i), 
 
          -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({ 
 
      fill: colors[i % colors.length], 
 
      'stroke-width': 1, 
 
      'opacity': 1 
 
     }).add(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="width: 500px; height: 500px; margin: 0 auto"></div>

Answer 1

Defaulty при экспорте диаграммы, то новая копия опции экспортируется, игнорируя elementes которые отображенные после диаграммы инициализации. Как твои дуги. Вы должны добавить фигуры в событие загрузки, чтобы сохранить эти объекты «в параметрах диаграммы».

chart: { 
    polar: true, 
    renderTo: 'container', 
    events: { 
    load: function() { 
     var chart = this, 
     parts = 8, 
     colors = ["#058DC7", "#50B432", "#ED561B", "#DDDF00", "#24CBE5", "#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1", "#696969", "#64E572", "#FF9655", "#FFF263", "#6AF9C4"]; 

     for (var i = 0; i < parts; i++) { 
     chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
      chart.plotTop + chart.yAxis[0].center[1], 
      chart.yAxis[0].height, 
      0, -Math.PI + (Math.PI/(parts/2) * i), -Math.PI + (Math.PI/(parts/2) * (i + 1))).attr({ 
      fill: colors[i % colors.length], 
      'stroke-width': 1, 
      'opacity': 1 
     }).add(); 
     } 
    } 
    } 
}, 

Пример: - http://jsfiddle.net/71yrh58e/1/