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

我正在尝试设计一个Highcharts Label。其中一个选项是style: CSSObject，但与许多Highcharts CSSObjects一样，它实际上并不需要CSS。它完全窒息在background-color:，我似乎无法找到一个可行的语法。如何设置Highcharts HTML标签的背景颜色？

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

来源

2014-02-06 Amanda

我不认为这是可能的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/

Obvously，是standad HTML/CSS，你可以风格的文字不过你想要的。

来源

2014-02-07 09:26:22 SteveP

不幸的是，这是不可能的，因为标签对象被转换为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/

来源

2014-02-07 10:27:38

感谢。这也是非常有用的。 – Amanda

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

回答

相关问题