Как выровнять центр пользовательской метки в старших чартах

Question

См. пример jsfiddle

 labels: {
        items : [{
            html : 'Center Me!',
            style : {
                left : '0px',
                top : '-15px',
                fontSize : '20px'
            }
        }]
    }

Я пытаюсь выровнять пользовательскую метку в элементе JSON / items / items, чтобы она висела прямо под заголовком и подзаголовком.

Играя с firebug, я могу изменить текстовый элемент SVG для метки, добавить text-align = 'middle' и изменить атрибут x = '', чтобы он имел то же значение, что и атрибут x заголовка.Это делает его идеально выровненным под заголовком и остается там при изменении размера, но я не могу понять, как заставить библиотеку highcharts генерировать этот источник.

Может быть, есть лучший способ добавить другую метку под субтитром?

Answer 1

Вместо этого я использовал percetange.

           left:300%

Проверьте это jfiddle http://jsfiddle.net/F2erm/146/

Answer 2

Если вы хотите, вы также можете добавить элемент HTML после того, как диаграмма была сгенерирована для выполнения этого эффекта (см. Пример на http://jsfiddle.net/brightmatrix/5517s8zb/1/).

В этом случае, чтобы получить правильный центрированный эффект, выВам нужно будет явно определить ширину div контейнера.

<div id="container" style="height: 400px; width: 100%"></div>

Вот HTML-элемент:

/* add an HTML element to the chart starting at 0px from the left corner and 
   10% of the container's height from the top */
chart.renderer.html('<div align="center" style="font-size: 20px; width: ' + 
$('#container').width() + 'px">Center Me!</div>',0,$('#container').height()*.1).add();

Я сделал 10% высоты контейнера, чтобы сделать позицию более гибкойВы также можете добавить или вычесть определенные размеры в пикселях, пока не поместите их в нужное вам место.

Надеюсь, это полезно!

Answer 3

Быстрое исправление: добавьте это в свой стиль

осталось: '160px'