Placer le texte au centre de la tarte graphique - Highcharts
Je voudrais mettre un titre dans le centre de la tarte/donut graphique dans HighCharts.
Je ne vois rien dans les options du graphique qui irait directement à l'activer, donc, je pense qu'il nécessite l'utilisation de la Highcharts rendu SVG -- chart.renderer.text('My Text', x, y)
.
J'ai mis en place mais je ne peux pas obtenir que le texte soit centré à l'intérieur de la tarte. Les pourcentages ne semblent pas être accepté que pour les valeurs x et y. Est-il un moyen via un programme pour qu'il soit centré à l'intérieur de la parcelle, et pour survivre récipient redimensionnement?
Mise à jour: Configuration de x et y à 50% fonctionne très bien au centre d'un cercle (à l'aide de renderer.circle(x, y, radius)
)—mais pas pour centrer le texte (à l'aide de renderer.text(text, x, y)
).
Voir le résultat ici: http://jsfiddle.net/supertrue/e2qpa/
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin de prendre en compte l'emplacement du graphique, donc si vous utilisez la 'gauche' et 'top' des attributs, vous pouvez ajouter sur la moitié de la largeur de la parcelle et de soustraire la moitié de la largeur de votre cadre de sélection de texte. Cela donnerait le centre exact:
Apparemment la boîte englobante sera de 0, sauf si vous ajoutez d'abord.
Correction:
Donc, ma pensée originale, et cela semble très bien, est que le texte sera aligné en haut à gauche, cependant il est fait par le bas, à gauche à la place. Ainsi, au lieu de soustraire la moitié de la hauteur, nous avons vraiment besoin de l'ajouter. Ce qui me confond, et quelque chose que je ne comprends pas encore, c'est que, pour obtenir le centre vous ajoutez seulement 25% de la hauteur plutôt que de 50%. Remarque: Cela ne semble pas fonctionner sur IE 7 ou 8.
MISE À JOUR MAJEURE
http://jsfiddle.net/NVX3S/2/
< Centrée sur le texte qui fonctionne dans tous les browers
Ce que cette nouvelle mise à jour n'est-il ajoute un nouvel élément à l'aide de jquery après le tableau est terminé. Cela fonctionne dans toutes les browers que j'ai testé (y compris IE7, 8, 9, Firefox et Chrome).
var textY = chart.plotTop + ((chart.plotHeight + 18) * 0.5);
Maintenant, comment obtenir le Titre de hauteur de façon dynamique? jsfiddle.net/64td8What confuses me, and something I don't understand yet, is that to get the center you add only 25% of the height rather then 50%
Utiliser ce code pour centrer titre du graphique verticalement:
Exemple
Modifier
Depuis la version 2.1 Du flottant de la propriété peut être omis comme le la documentation etats, il est implicite par la présence de la verticalAlign propriété
Quand une valeur est fournie, le titre se comporte comme flottant.
La meilleure solution est de s'appuyer sur des séries center, au lieu de
plotHeight
ouplotWidth
.De travail de démonstration: http://jsfiddle.net/4dL9S/
Tout d'abord, vous voudrez peut-être vérifier le code html de votre violon.
Vous avez eu un largeur sur votre conteneur de
500
au lieu de500px
.Seconde, ce violon est un peu rapide et sale, mais je pense qu'il accomplit ce que vous vouliez?
http://jsfiddle.net/e2qpa/3/
Il suffit d'ajouter le suivant.
title: {
text : 'title to display in the middle'
verticalAlign: 'middle',
y: 5
},