[svg] Разместить текст в центре круговой диаграммы - Highcharts


Answers

Используйте этот код для заголовка центральной диаграммы по вертикали:

title: {
    verticalAlign: 'middle',
    floating: true
}

Example

редактировать

Начиная с версии 2.1. Свойство плавания можно опустить, поскольку в documentation указано, что это подразумевается наличием свойства verticalAlign

Когда задано значение, заголовок ведет себя как плавающий.

Question

Я хотел бы разместить название в центре диаграммы пирога / пончика в HighCharts.

Я ничего не вижу в параметрах диаграммы, которые бы прямо включали это, поэтому я думаю, что для этого требуется использование Highcharts SVG renderer - chart.renderer.text('My Text', x, y) .

У меня это настроено, но я не могу заставить текст сосредоточиться внутри пирога. Проценты, по-видимому, не принимаются для значений x и y. Есть ли программный способ, чтобы он центрировался внутри сюжета, и чтобы пережить изменение размера контейнера?

Обновление: установка x и y до 50% отлично работает, чтобы центрировать круг (используя renderer.circle(x, y, radius) ), но не для центра текста (с использованием renderer.text(text, x, y) ).

См. Результат здесь: http://jsfiddle.net/supertrue/e2qpa/




Во-первых, вы можете проверить html в своей скрипке. У вас была ширина на вашем контейнере 500 вместо 500px .

<div id="container" style="height: 400px; width: 500px"></div>​

Во-вторых, эта скрипка немного быстро и грязно, но я думаю, что она выполняет то, что вы хотели?

http://jsfiddle.net/e2qpa/3/




Related