Formatter Использование Highcharts

Question

Я использую пользовательский форматировщик в создании этикетки данных:

formatter: function() { 
    return this.point.name + '<br>' + this.point.id; 
} 

, который производит:

SomeName

SomeID

В то время как в верхней линия, по-видимому, сосредоточена относительно моего сегмента/блока, в нижней строке нет. В более общем плане, можно ли форматировать верхнюю и нижнюю строки отдельно?

Я бы хотел, чтобы верхняя и нижняя линии были центрированы, но верхняя строка была значительно больше, чем нижняя строка. Когда я изменяю свойство fontSize по стилю, под dataLabels в последовательности он влияет на обе строки.

Answer 1

Вы можете добавить дополнительные элементы html в функцию форматирования, а затем добавить их в контент вашего сердца. Убедитесь, что у вас есть useHTML:true. Например: http://jsfiddle.net/qqqpmpLm/

CSS:

.labelName { 
    font-size: 20px; 
} 
.label { 
    color:red; 
    text-align:center; 
} 

dataLabels:

dataLabels: { 
    enabled: true, 
    useHTML: true, 
    formatter: function() { 
     return '<div class="label"><span class="labelName">'+this.point.name + '</span><br>' + this.point.id + '</div>' 
    } 
    },