Question

我正试图设计一个Highcharts Label。其中一个选项是style: CSSObject，但与许多Highcharts CSSObject一样，它实际上并不需要css。它在background-color:上完全窒息，我似乎无法找到可行的语法。

labels: {
            items: [{
                html: "<p>Box of text. But how do I set the Background Color?</p>",
                style: {
                    left: '60px',
                    top: '20px',
                    width: '250px',
                    fontSize: '10px',
                    backgroundColor: '#fffdcc'
                }
            }]
        },

如何设置背景颜色？ Fiddle

Answer 1

不幸的是，这是不可能的，因为标签对象被转换为SVG元素，这些元素不包括像背景这样的样式。您可以使用变通方法并通过rect（）按渲染器和背景添加文本。

var point = chart.series[0].data[8];

    var text = chart.renderer.text(
            'Max', 
            point.plotX + chart.plotLeft + 10, 
            point.plotY + chart.plotTop - 10
        ).attr({
            zIndex: 5
        }).add();

    var box = text.getBBox();
    chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
        .attr({
            fill: '#FFFFEF',
            stroke: 'gray',
            'stroke-width': 1,
            zIndex: 4
        })
        .add();

示例http://jsfiddle.net/PT769/

Answer 2

我不认为这在highcharts API中是可行的。我建议你只需将自己的html元素添加到图表中，例如

<div id="addText" style="position:absolute; left:0px; top:0px;"></div>

var textX = 200;
var textY = 80;
var span = '<span id="labelText" style="position:absolute; text-align:center;width:150px;background-color:red">';
span += '<span style="font-size: 14px">Box of text with the background set.</span><br>';
span += '</span>';

$("#addText").append(span);
span = $('#labelText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));

http://jsfiddle.net/gGegL/

显然，作为标准的html / css，您可以根据需要设置文本样式。

如何设置Highcharts HTML标签的背景颜色？

2 个答案: