Highcharts:渲染标签时,useHTML标志不起作用

时间:2016-11-07 09:14:18

标签: javascript svg highcharts

我使用highcharts和phantomjs服务器来渲染图表和标签,但渲染标签时useHTML标志似乎不起作用。我按照文档中的说明启动了服务器 phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003

然后我发送帖子请求,其中包含以下内容作为infile

{
chart: {
    events: {
        load: function() {
            var label = this.renderer.label('Hello      World', useHTML=true)
            .css({
                    color: '#FF11FF',
                    fontSize: '12px'
                })
            .attr({
                    fill: 'rgba(0, 0, 100, 0.75)',
                    padding: 8,
                    r: 5,
                    zIndex: 6
                })
            .add()

            box = label.getBBox();
            label.align(Highcharts.extend(box, {
                    align: 'center',
                    verticalAlign: 'top',
                    x: 0,
                    y: 20
                }),
                null, 'spacingBox');

            var label2 = this.renderer.label('Goodbye World')
                .css({
                    color: '#222222'
                })
                .add()
            label2.align(Highcharts.extend(label2.getBBox(), {
                    align: 'left',
                    verticalAlign: 'top',
                    x: 0,
                    y: box.height + 40
                }),
                null, 'spacingBox');
        }

    },
    height: 800,
    width: 500
},
title: {
    text: ''
}
};

然后我将其导出为svg,但标签的文本按原样打印。我也试过

var label = this.renderer.label('Hello      World',null, null, 'rect', null, null, true)

但是这导致第一个文本根本没有显示,蓝色背景被添加,第二个文本也被添加,但第一个文本也没有。第一个甚至没有在export.highcharts.com上工作,但第二个工作正常。我在这里做错了什么?

1 个答案:

答案 0 :(得分:0)

Renderer.label需要的参数多于你提供的参数,docs: http://api.highcharts.com/highcharts/Renderer.label

示例:

this.renderer.label('Hello      World',null,null,null,null,null,true)

正确使用Renderer.label你的小提琴: https://jsfiddle.net/6atnc2xj/