svg - Coloque texto en el centro del gráfico circular-Highcharts

Question

Me gustaría colocar un título en el centro de un gráfico de pastel / dona en HighCharts.

No veo nada en las opciones del gráfico que lo habilite directamente, así que estoy pensando que requiere usar el renderizador Highcharts SVG - chart.renderer.text(''My Text'', x, y) .

Tengo esa configuración pero no puedo hacer que el texto se centre dentro del pastel. Los porcentajes no parecen aceptados para los valores de xey. ¿Existe una forma programática de centrarlo dentro de la trama y sobrevivir al cambio de tamaño de los contenedores?

Actualización: Ajustar x e y a 50% funciona bien para centrar un círculo (usando renderer.circle(x, y, radius) ) -pero no para centrar el texto (usando renderer.text(text, x, y) ).

Vea el resultado aquí: http://jsfiddle.net/supertrue/e2qpa/

Answer 1

Debe tener en cuenta la ubicación del gráfico, de modo que si utiliza los atributos ''izquierda'' y ''superior'', puede agregar la mitad del ancho del gráfico y restar la mitad del ancho del cuadro delimitador de texto. Esto arrojaría el centro exacto:

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

Aparentemente, el cuadro delimitador será 0 a menos que lo agregue primero.

Corrección:

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

Por lo tanto, mi pensamiento original, y esto parecía estar bien, era que el texto estaría alineado por la esquina superior izquierda, sin embargo, se lo hace abajo a la izquierda. Por lo tanto, en lugar de restar la mitad de la altura, realmente necesitamos agregarlo. Lo que me confunde, y es algo que aún no entiendo, es que para obtener el centro se agrega solo el 25% de la altura en lugar del 50%. Nota: Esto no parece funcionar en IE 7 u 8.

ACTUALIZACIÓN MAYOR

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

<- Texto centrado que funciona en todos los navegadores

Lo que hace esta nueva actualización es agregar un nuevo elemento usando jquery una vez que el gráfico está listo. Esto funciona en todos los navegadores que he probado (incluidos IE7, 8, 9, Firefox y 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));

Answer 2

En primer lugar, es posible que desee comprobar el html en su violín. Tenía un ancho en su contenedor de 500 lugar de 500px .

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

En segundo lugar, este violín es un poco rápido y sucio, pero creo que logra lo que querías.

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

Answer 3

La mejor solución es confiar en el centro de la serie, en lugar de plotHeight o 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));
});

Demostración de trabajo: http://jsfiddle.net/4dL9S/

Answer 4

Use este código para centrar el título del gráfico verticalmente:

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

Example

Editar

Desde la versión 2.1, la propiedad flotante se puede omitir ya que la documentation indica que está implícita por la presencia de la propiedad verticalAlign.

Cuando se da un valor, el título se comporta como flotante.

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