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





api (5)


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

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

Example

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

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

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

Я хотел бы разместить название в центре диаграммы пирога / пончика в 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/




Вы должны учитывать расположение диаграммы, поэтому, если вы используете атрибуты «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));



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();



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

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

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

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




Вы можете использовать visible опцию определения серии.

visible: Boolean Установить начальную видимость серии. По умолчанию true.

Код:

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    visible: false
}, {
    data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
    yAxis: 1,
    visible: false
}]

Вот рабочая скрипка: http://jsfiddle.net/IrvinDominin/CkLLt/1/





svg highcharts