Question

我正在使用带有图表类型线的极坐标图表，并在创建图表后将颜色渲染到其中。

在将图表导出为png，svg等时，渲染的颜色不会出现在导出的图表中。

有没有办法在导出的图表上保留渲染的颜色？

＆＃13;

$(function () {
    
    var chart = new Highcharts.Chart({
	    chart: {
	        polar: true,
            renderTo: 'container'
	    },
	    title: {
	        text: 'Highcharts Polar Chart'
	    },
	    pane: {
	        startAngle: 0,
	        endAngle: 360
	    },
	    xAxis: {
	        tickInterval: 45,
	        min: 0,
	        max: 360,
	        labels: {
	        	formatter: function () {
	        		return this.value + '°';
	        	}
	        }
	    },
	    yAxis: {
	        min: 0,
          tickInterval: 2,
          showLastLabel: true
	    },
	    plotOptions: {
	        series: {
	            pointStart: 0,
	            pointInterval: 45
	        },
	        column: {
	            pointPadding: 0,
	            groupPadding: 0
	        },
          line: {
          		pointPlacement: "between",
              dataLabels: {
                  allowOverlap: true,
                  enabled: true
              }
          }
	    },
	    series: [{
	        type: 'line',
	        name: 'Line',
	        data: [1, 2, 3, 4, 5, 6, 7, 8]
	    }]
	});
    
    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();
    }
});

＆＃13;

<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>

＆＃13;

Answer 1

导出图表时出现Defaulty，然后导出新的选项副本，忽略在图表初始化后渲染的元素。就像你的弧线一样。您应该在load事件中添加形状，以便将这些对象保留在“图表选项”中。

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/

Highcharts导出：无法导出渲染的弧色

1 个答案: