0

我想将文本和图像等几个原始形状动态添加到 highcharts / highstock 中。

请看这个小提琴。

$(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();   
        });
});
});

单击“添加图像”按钮后，将有一个图像添加到图表中。不幸的是，那些动态添加的元素无法导出到图像中。

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

4

2 回答 2

1

导出图表时，图表 SVG 会从原始.Chart调用中重新生成。如果要在图表绘制后添加内容，请在charts:events:load回调中进行。

    chart: {
        renderTo: 'container',
        spacingBottom: 50,
        events: {
            load: function(){
                this.renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30).add();
            }
        }
    },

在此处查看更新的小提琴。

于 2013-05-12T15:37:20.653 回答
1

您可以使用 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();
                }
            }
        }
    });
});
于 2013-05-13T11:35:53.713 回答