Как установить цвет фона ярлыка HTML Highcharts?

Question

Я пытаюсь стиль Highcharts Label. Один из вариантов: style: CSSObject, но, как и во многих высокоуровневых CSSObjects, он действительно не хочет 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

Я не думаю, что это возможно в 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, вы можете стилизовать текст, как вы.

Answer 2

Unfortunatel невозможно, поскольку объекты меток переводятся в элементы 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/