无法导出在highcharts / highstock中的回调函数中添加的渲染器形状 [英] Can not exporting renderer shapes added in callback function in highcharts / highstock

问题描述

我想动态地将几个原始形状（如文字和图像）添加到highcharts / highstock中。

请参阅 小提琴 。

  $（function（）{
 var chart = new Highcharts.Chart（{
 
图：{
 renderTo：'container'，
 spacingBottom：50 
}，
 
 xAxis：{'b $ b categories：['Jan'，'二月'，'三月'，'四月'，'五月'，'六月'，'七月'，'八月'，'九月'，'十月'，'十一月'，'十二月'] 
}，
 
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
}] 
 $（＃add）。click（function（）{
 chart.renderer.image（'http://highcharts.com/ demo / gfx / sun.png'，100，100，30，30）
 .add（）; 
}）; 
}）; 
}）; 
  

点击按钮添加图片后，会有图片添加到图表中。 不幸的是，这些动态添加的元素无法导出到图像。

有没有可能的解决方案来解决这个问题？ $ b

解决方案

您可以使用chart.exportChart（）函数来实现： http://jsfiddle.net/B6s7V/38/

与这里。

  $（＃export）。click（function（）{
 chart.exportChart（null，{
 chart：{
 events：{
 load ：function（）{
 this.renderer.image（'http://highcharts.com/demo/gfx/sun.png'，100，100，30，30）.add（）; 
 } 
} 
} 
}）; 
}）; 
  

I want to dynamically added several primitive shapes like text and images into highcharts / highstock.

Please see this fiddle.

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            spacingBottom: 50
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    }, function(chart) { // on complete
        $("#add").click(function(){
    chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30)
        .add();   
        });
});
});

After click button "Add Image", there is a image will be added to chart. Unfortunately, those dynamically added elements can not be exported to images.

Is there any possible solution to fix this?

解决方案

You can use chart.exportChart() function to achieve that: http://jsfiddle.net/B6s7V/38/

The same solution as here.

$("#export").click(function () {
    chart.exportChart(null, {
        chart: {
            events: {
                load: function () {
                    this.renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30).add();
                }
            }
        }
    });
});

这篇关于无法导出在highcharts / highstock中的回调函数中添加的渲染器形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！