Поместите текст в центр круговой диаграммы - Highcharts - PullRequest
Новая
       44

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

29 голосов
/ 16 марта 2012

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

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

Ответы [ 6 ]

45 голосов
/ 12 апреля 2013

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

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

Пример

Donut chart with title in the center

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

Начиная с версии 2.1 Плавающее свойство может быть опущено, так как документация гласит, что это подразумевается наличием свойства verticalAlign

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

36 голосов
/ 20 марта 2012

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

<- центрированный текст, который работает во всех браузерах </p>

Что делает это новое обновление, так это добавление нового элемента с помощью 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));
8 голосов
/ 24 февраля 2014

Лучшее решение - полагаться на последовательный центр вместо 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/

1 голос
/ 03 ноября 2018

Просто добавьте следующее.

title: { text : 'title to display in the middle' verticalAlign: 'middle', y: 5 },

1 голос
/ 18 марта 2012

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

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

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

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

0 голосов
/ 06 апреля 2016 
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();
...