web-dev-qa-db-fra.com

Placer le texte au centre du graphique à secteurs - Highcharts

Je voudrais placer un titre au centre d'un graphique à secteurs/à anneaux dans HighCharts.

Je ne vois rien dans les options du graphique qui permettrait directement cela, donc je pense que cela nécessite l'utilisation du rendu Highcharts SVG - chart.renderer.text('My Text', x, y).

Je l'ai installé mais je n'arrive pas à centrer le texte à l'intérieur de la tarte. Les pourcentages ne semblent pas être acceptés pour les valeurs x et y. Existe-t-il un moyen programmatique de le centrer à l'intérieur de l'intrigue et de survivre au redimensionnement du conteneur?

Mise à jour: La définition de x et y à 50% fonctionne très bien pour centrer un cercle (en utilisant renderer.circle(x, y, radius)) - mais pas pour centrer le texte ( en utilisant renderer.text(text, x, y)).

Voir le résultat ici: http://jsfiddle.net/supertrue/e2qpa/

svghighcharts
29
supertrue

Vous devez tenir compte de l'emplacement du graphique.Par conséquent, si vous utilisez les attributs `` gauche '' et `` haut '', vous pouvez ajouter la moitié de la largeur du tracé et soustraire la moitié de la largeur de votre cadre de sélection de texte. Cela donnerait le centre exact:

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

Apparemment, la zone de délimitation sera 0 sauf si vous l'ajoutez d'abord.

Correction:

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

Donc, ma pensée originale, et cela semblait bien, était que le texte serait aligné en haut à gauche, mais cela se fait en bas à gauche à la place. Ainsi, au lieu de soustraire la moitié de la hauteur, nous devons en fait l'ajouter. Ce qui me déroute, et quelque chose que je ne comprends pas encore, c'est que pour obtenir le centre, vous n'ajoutez que 25% de la hauteur plutôt que 50%. Remarque: cela ne semble pas fonctionner sur IE 7 ou 8.

MAJOR UPDATE

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

<- Texte centré qui fonctionne dans tous les navigateurs

Ce que fait cette nouvelle mise à jour, c'est qu'elle ajoute un nouvel élément à l'aide de jquery une fois le graphique terminé. Cela fonctionne dans tous les navigateurs que j'ai testés (y compris IE7, 8, 9, Firefox et 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));
35
johnstorm

Utilisez ce code pour centrer le titre du graphique verticalement:

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

Exemple

Donut chart with title in the center

Éditer

Depuis la version 2.1 La propriété flottante peut être omise car documentation indique qu'elle est impliquée par la présence de la propriété verticalAlign

Lorsqu'une valeur est donnée, le titre se comporte comme flottant.

46
Pavel Chuchuva

La meilleure solution consiste à s'appuyer sur le centre de la série, au lieu de plotHeight ou 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));
});

Démo de travail: http://jsfiddle.net/4dL9S/

8
Paweł Fus

Tout d'abord, vous voudrez peut-être vérifier le code html dans votre violon. Vous aviez une largeur sur votre conteneur de 500 au lieu de 500px.

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

Deuxièmement, ce violon est un peu rapide et sale, mais je pense qu'il accomplit ce que vous vouliez?

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

1
mg1075

Ajoutez simplement ce qui suit.

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

1
Kifayat Ullah
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();
0
Giampaolo