HighCharts - 渲染器功能在导出URL中不起作用

Question

我正在使用导出网址将渲染图表作为图像。一切正常。但是渲染器方法在导出方法中不起作用。

但是在渲染它作为正常图表时它的工作。经过一些研究后我才知道我们可以使用回调。但没有希望。不知道。

如果您检查小提琴，上面的图表是正常图表，下面的图表是我使用导出URL将其保存为图像的图像。最后我在文本框中输入了导出的URL。

我正在使用圆圈和文字渲染方法。请帮助我在哪里出错。

$(function () {
  var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
    },
    title: {
        text: 'DNA Slim Burn Concept'
    },
     legend: {
        enabled: true
    },

    xAxis: {
        title: {
            text: 'Duration (Weeks)'
        },
        categories: ['1', '20', '30']
    },
    yAxis: {
        title: {
            text: 'Weight (Kg)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },

     series: [{

         color: '#000',
         lineWidth: 2,
        data: [{ marker: {
                fillColor: '#EE9A4D',
                symbol: 'triangle',
                lineWidth: 3,
                lineColor: "#EE9A4D" 
        },y:65}, { marker: {
                fillColor: '#3BB9FF',
                symbol: 'circle',
                lineWidth: 3,
                lineColor: "#3BB9FF" 
        },y:55}, { marker: {
                fillColor: '#59E817',
                symbol: 'square',
                lineWidth: 3,
                lineColor: "#59E817" 
        },y:50}]        
    }],

},

function(chart) { // on complete

    //Render Circle
     chart.renderer.circle(100, 235, 5).attr({
        fill: '#3BB9FF',
     }).add();

    // Render the text 
    chart.renderer.text('<span style="color: #3BB9FF">Data 1</span>', 110, 240).css({
        color: '#4572A7',
        fontSize: '12px',
        textAlign: 'center'
    }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
    }).add();

    // Render the Square
    chart.renderer.rect(95, 245, 10, 10, 0)
        .attr({
            fill: '#59E817',
        }).add();

    // Render the text  for square
    chart.renderer.text('<span style="color: #59E817">Data 2</span>', 110, 255).css({
        color: '#59E817',
        fontSize: '12px',
        textAlign: 'center'
    }).attr({
        zIndex: 999
    }).add();
 });



  var options = {
     chart: {
        type: 'line',
        renderTo: 'chart',
         events:{
                        load:function(){
                            //Render Circle
     chart.renderer.circle(100, 235, 5).attr({
        fill: '#3BB9FF',
     }).add();

    // Render the text 
    chart.renderer.text('<span style="color: #3BB9FF">Data 1</span>', 110, 240).css({
        color: '#4572A7',
        fontSize: '12px',
        textAlign: 'center'
    }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
    }).add();

    // Render the Square
    chart.renderer.rect(95, 245, 10, 10, 0)
        .attr({
            fill: '#59E817',
        }).add();

    // Render the text  for square
    chart.renderer.text('<span style="color: #59E817">Data 2</span>', 110, 255).css({
        color: '#59E817',
        fontSize: '12px',
        textAlign: 'center'
    }).attr({
        zIndex: 999
    }).add();
         }
      }
  },

    title: {
        text: 'Concept'
    },
     legend: {
        enabled: false
    },

    xAxis: {
        title: {
            text: 'Duration (Weeks)'
        },
        categories: ['1', '20', '30']
    },
    yAxis: {
        title: {
            text: 'Weight (Kg)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },

     series: [{
         color: '#000',
         lineWidth: 2,
         data: [{ marker: {
                fillColor: '#EE9A4D',
                //symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)',
                symbol: 'triangle',
                lineWidth: 3,
                lineColor: "#EE9A4D" // inherit from series
        },y:65}, { marker: {
                fillColor: '#3BB9FF',
                symbol: 'circle',
                lineWidth: 3,
                lineColor: "#3BB9FF" // inherit from series
        },y:55}, { marker: {
                fillColor: '#59E817',
                symbol: 'square',
                lineWidth: 3,
                lineColor: "#59E817" // inherit from series
        },y:50}]        
    }]  ,


    exporting: {
        sourceWidth: 400,
        sourceHeight: 300,

    }

 }; 

// URL to Highcharts export server
var exportUrl = 'http://export.highcharts.com/';
// POST parameter for Highcharts export server
var object = {
  options: JSON.stringify(options),
  type: 'image/jpeg',
  async: true
};

// Ajax request
$.ajax({
type: 'post',
url: exportUrl,
data: object,
   success: function (data) {       
    // Update "src" attribute with received image URL
    $('#chart').attr('src', exportUrl + data);
    var chart_vv = exportUrl + data;
    $('#chart-value').val(chart_vv);
   }
 });    
});

这是我的Fiddle