Question

在HighCharts中导出时，如何将事件文本包含在图表左侧。文本在导出时消失。

events: {
                load: function () {
                    var label = this.renderer.html("36 Aircraft delivered to Air 1<UL><li>13 in 2013</li><li>23 in 2014</li></UL>52 Aircraft remaining on Air 2 certificate")
                    .css({
                        width: '180px'
                    })
                    .attr({
                        'stroke': 'silver',
                        'stroke-width': 1,
                        'r': 5,
                        'padding': 10
                    })
                    .add();

                    label.align(Highcharts.extend(label.getBBox(), {
                        align: 'left',

                        x: 0, // offset
                        verticalAlign: 'top',
                        y: 40 // offset
                    }), null, 'spacingBox');

                }
            },
            marginLeft: 300
        },

Answer 1

Highcharts中的导出功能首先渲染原始图表，而不是在其进一步操作（例如使用渲染器添加文本）修改之后。幸运的是，您可以手动调用exportChart函数并传入其他图表设置，包括添加渲染器文本的功能。这将让你做你想做的事。

详情请见此处：Can not exporting renderer shapes added in callback function in highcharts / highstock

Answer 2

您需要使用renderer text代替html（未导出）。

 events: {
                load: function () {
                    var label = this.renderer.text("36 Aircraft delivered to Air 1<UL><li>13 in 2013</li><li>23 in 2014</li></UL>52 Aircraft remaining on Air 2 certificate",100,100)
                    .css({
                        width: '180px'
                    })
                    .attr({
                        'stroke': 'silver',
                        'stroke-width': 1,
                        'r': 5,
                        'padding': 10
                    })
                    .add();

                    label.align(Highcharts.extend(label.getBBox(), {
                        align: 'left',

                        x: 0, // offset
                        verticalAlign: 'top',
                        y: 40 // offset
                    }), null, 'spacingBox');

                }
            },

示例：http://jsfiddle.net/4PU9j/1/

HighCharts：如何在导出时将文本事件包含在图表的左侧

2 个答案: