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

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

Я не вижу ничего в параметрах диаграммы, которые бы прямо включали это, поэтому я думаю, что для этого требуется использовать рендеринг SVG Highcharts - 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/

Ответы

Ответ 1

Вам нужно учитывать расположение диаграммы, поэтому, если вы используете атрибуты "left" и "top", вы можете добавить половину ширины графика и вычесть половину ширины ограничивающего прямоугольника текста. Это даст точный центр:

text = chart.renderer.text("My Text").add();
textBBox = text.getBBox();
x = chart.plotLeft + (chart.plotWidth  * 0.5) - (textBBox.width  * 0.5);
y = chart.plotTop  + (chart.plotHeight * 0.5) - (textBBox.height * 0.5);
text.attr({x: x, y: y});

По-видимому, ограничивающий прямоугольник будет равен 0, если вы не добавите его первым.

Исправление:

y = chart.plotTop  + (chart.plotHeight * 0.5) + (textBBox.height * 0.25);

Итак, моя оригинальная мысль, и это казалось прекрасным, заключалось в том, что текст будет выровнен по левому верхнему углу, однако это делается в левом нижнем углу. Таким образом, вместо того, чтобы вычесть половину высоты, нам действительно нужно добавить его. Что меня смущает, и что-то я еще не понимаю, так это то, что для получения центра вы добавляете только 25% высоты, а не 50%. Примечание. Это не работает на IE 7 или 8.

ОСНОВНОЕ ОБНОВЛЕНИЕ

http://jsfiddle.net/NVX3S/2/

< - Центрированный текст, который работает во всех браузерах

Что делает это новое обновление, так это добавляет новый элемент, используя jquery после завершения графика. Это работает во всех браузерах, которые я тестировал (включая IE7, 8, 9, Firefox и Chrome).

var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
var textY = chart.plotTop  + (chart.plotHeight * 0.5);

// The width and height need to be calculated properly, so I made it a span.
var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
span += '<span style="font-size: 32px">Upper</span><br>';
span += '<span style="font-size: 16px">Lower</span>';
span += '</span>';

$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));

Ответ 2

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

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

Пример

Изменить

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

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

Ответ 3

Лучшее решение - полагаться на центр серии, а не на plotHeight или plotWidth.

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    plotOptions: {
        pie: {
            //innerSize: '60%'
        }
    },
    title: {
        text: ''
    },
    series: [{
        data: [
            ['Firefox', 2262],
            ['IE7', 3800],
            ['IE6', 1000],
            ['Chrome', 1986]
            ]}]
},

function(chart) { // on complete
    var textX = chart.plotLeft + (chart.series[0].center[0]);
    var textY = chart.plotTop  + (chart.series[0].center[1]);

    var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
    span += '<span style="font-size: 32px">Upper</span><br>';
    span += '<span style="font-size: 16px">Lower</span>';
    span += '</span>';

    $("#addText").append(span);
    span = $('#pieChartInfoText');
    span.css('left', textX + (span.width() * -0.5));
    span.css('top', textY + (span.height() * -0.5));
});

Рабочая демонстрация: http://jsfiddle.net/4dL9S/

Ответ 4

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

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

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

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

Ответ 5

        var newChart = new Highcharts.Chart(options);

            //Set No data text
            var textX = newChart.plotLeft + (newChart.plotWidth * 0.5);
            var textY = newChart.plotTop + (newChart.plotHeight * 0.3);
            var textWidth = 500;
            textX = textX - (textWidth / 2);

            newChart.renderer.label('<div style="width: ' + textWidth + 'px; text-align: center"><span>Dati non disponibili per questa selezione</span></div>', textX, textY, null, null, null, true)
            .css({
                fontSize: '16px',
            }).add();