Highcharts: Les étiquettes de données de graphique à secteurs s'affichent en dehors du canevas

J'ai également ce problème - je pense que cela devrait être étiqueté comme un bogue plutôt que comme une amélioration, car le logiciel ne fonctionne pas comme prévu

+1 sur ce problème, la tarte pourrait-elle être dimensionnée automatiquement en fonction des étiquettes de données ??

+1

+1 ici aussi. Ma société a récemment acheté une licence pour utiliser ce logiciel. Corriger ce bug serait d'une grande aide. Quelqu'un chez Highslide peut-il donner une priorité/un commentaire sur ce qui se passe ici ? Celui-ci est ouvert depuis un an.

+1. Ce que Randallmorey a dit - exactement la même situation. De plus, d'accord avec le rowanmanning, couper des choses est un bug.

Ce bug a été ouvert il y a 2 ans. Aucun progrès? Les diagrammes circulaires nous sont inutiles si les étiquettes sont coupées.
Il est toujours marqué comme une amélioration.

Détecter l'espace nécessaire pour les étiquettes de données est très compliqué, et nous
ne lui donnera pas la priorité absolue pour le moment. Vous devez ajouter le bon
les marges et la taille de la tarte pour éviter cela. Vous pouvez également définir le style de largeur du
dataLabels pour forcer le retour à la ligne.

+1

J'ai aussi ce problème.

cela devrait être marqué comme un bug, l'amélioration signifie qu'il fonctionne correctement mais peut être amélioré, ce qui n'est évidemment pas le cas ici.
+1

Hé @highslide-software, y aura-t-il une solution pour cela ? un graphique basé sur un canevas peut-il être une solution possible ?

+1

+1 J'ai aussi ce problème.

Moi aussi

Bon les gars, je vais essayer de trouver une solution. Nous avons besoin d'une logique récursive qui dessine des étiquettes de données, découvre si elles se répandent, puis réduit récursivement la taille du graphique jusqu'à ce que toutes les étiquettes soient présentes.

Voici ce que nous avons fait :

• Modification de l'option de taille de tarte par défaut en null. Lorsque la taille du secteur est nulle, le secteur est automatiquement ajusté dans la zone de tracé. Lorsque les étiquettes de données sont désactivées, les secteurs remplissent complètement la zone de tracé. Lorsque les étiquettes de données sont activées, les étiquettes de données sont également ajustées dans la zone de tracé.
• Modification de l'option de centre de tarte par défaut en [null, null]. Le centrage est géré indépendamment pour les options X et Y. Null signifie auto, donc le graphique s'adaptera à l'intérieur de la zone de tracé chaque fois que la taille est également nulle.
• Ajout d'une option, minSize. Lorsque la taille est nulle, elle ne descendra pas en dessous.

Démos :

• http://jsfiddle.net/highcharts/CjgLg/ . Saisissez la poignée de redimensionnement en bas à droite pour observer comment le redimensionnement automatique est géré.
• http://jsfiddle.net/highcharts/9tqSn/ . En conséquence de la taille dynamique, la taille de la tarte elle-même peut changer en fonction des étiquettes de données présentes. Notez comment cela change à mesure que les tranches sont affichées et masquées dans cette démo.

Tous les commentaires sont appréciés !

J'ai un tas d'étiquettes de données très longues (je ne peux pas vraiment les raccourcir) qui auront probablement pour résultat que le graphique sera ridiculement petit. Existe-t-il un moyen d'enrouler automatiquement les étiquettes sur deux ou trois lignes si elles dépassent une certaine largeur ?

Merci!

Oui, je pense que vous pouvez définir le dataLabels.style.width sur, disons, '100px'.

Merci beaucoup pour cela - Existe-t-il une estimation du moment où cela sera fusionné dans « master » ou dans une version ?

J'ai un cas où j'affiche plusieurs camemberts sur une page dans une formation aa 2x2. Chaque tarte a les mêmes étiquettes mais des données différentes.

Donc, cette solution peut générer 4 tartes de tailles différentes, ce qui n'est pas souhaitable - existe-t-il un moyen d'éviter cela tout en faisant tenir les étiquettes? Ce que je veux vraiment, c'est que les étiquettes de données soient ajustées pour s'adapter au graphique, pas au graphique. Merci d'avance.

Cela sera publié et fusionné dans le master lorsque Highcharts 3.0 sera disponible, espérons-le avant Noël.

Dans le cas où vous avez plusieurs secteurs dans le même graphique, vous devez toujours utiliser la taille absolue. En théorie, je pense que ce que vous décrivez pourrait être résolu en ajustant chaque tarte, puis en utilisant la plus petite taille de tarte pour chacun d'eux. Mais je ne sais pas comment cela fonctionnera dans la pratique, car les tartes sont ajustées dans la zone de tracé et non les unes par rapport aux autres.

@highslide-software Notez que les exemples ci-dessus ne fonctionnent pas en raison du CDN pour highcharts. J'ai corrigé les exemples de violon pour tous ceux qui s'y intéressent :

http://jsfiddle.net/CjgLg/13/ . Saisissez la poignée de redimensionnement en bas à droite pour observer comment le redimensionnement automatique est géré.
http://jsfiddle.net/9tqSn/11/ . En conséquence de la taille dynamique, la taille de la tarte elle-même peut changer en fonction des étiquettes de données présentes. Notez comment cela change à mesure que les tranches sont affichées et masquées dans cette démo.

Merci pour la correction ! +1 :)

J'ai un problème avec cette fonction de dimensionnement automatique sur les beignets. Cela fonctionne bien pour les tartes simples, mais lorsqu'il est utilisé sur une tarte de la série 2 (c'est-à-dire un beignet), les tartes intérieures et extérieures sont redimensionnées indépendamment. En particulier, lorsque le secteur intérieur n'a pas de légendes en forme d'araignée et que le secteur extérieur en a, le secteur intérieur n'est pas du tout redimensionné et le secteur extérieur est en effet redimensionné pour s'adapter à la fenêtre. Cela se traduit par un graphique déformé (généralement, le secteur intérieur devient plus large que le secteur extérieur, brisant complètement l'apparence et la sémantique du graphique).

Y a-t-il une chance que vous étendiez ce correctif pour prendre également en charge les beignets, sous la forme d'un seul gros gâteau ?

Voici un exemple : http://jsfiddle.net/mmarchetta/34VAT/2/

La tarte qui semble être la tarte extérieure (vert/bleu) est en fait la tarte intérieure, et celle avec plus de tranches qui semble être la tarte intérieure est en fait la tarte extérieure.

Merci!

J'ai le même problème avec le graphique en anneau, les étiquettes s'étendent à l'extérieur du graphique.

Ce cas montre comment les étiquettes sont coupées : http://jsfiddle.net/highcharts/7okk430t/

J'ai travaillé là-dessus et exploré la logique pour ajouter des points de suspension aux étiquettes de données débordantes. Il fonctionne actuellement bien sur les graphiques statiques, mais s'interrompt lors du redimensionnement ou de la mise à jour dynamique du graphique.

Une démo en direct peut être vue sur http://jsfiddle.net/highcharts/7okk430t/1/.

.. et voici la différence :

diff --git a/js/parts/DataLabels.js b/js/parts/DataLabels.js
index c72fabf..a7222c5 100644
--- a/js/parts/DataLabels.js
+++ b/js/parts/DataLabels.js
@@ -619,13 +619,41 @@ if (seriesTypes.pie) {
     * fall within the plot area.
     */
    seriesTypes.pie.prototype.placeDataLabels = function () {
+
+       var chart = this.chart,
+           spacing = chart.spacing;
        each(this.points, function (point) {
            var dataLabel = point.dataLabel,
-               _pos;
+               _pos,
+               overflow,
+               ellipsis;

            if (dataLabel && point.visible) {
                _pos = dataLabel._pos;
                if (_pos) {
+                   
+                   if (dataLabel._attr.align === 'right') {
+                       overflow = _pos.x - dataLabel.width;
+                       if (overflow < spacing[3]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (dataLabel._attr.align === 'left') {
+                       overflow = chart.chartWidth - _pos.x - dataLabel.width - spacing[1] - spacing[3];
+                       if (overflow < spacing[1]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (ellipsis) {
+                       dataLabel._attr.width = dataLabel.width + overflow;
+                       dataLabel.css({
+                           width: dataLabel._attr.width + PX,
+                           textOverflow: 'ellipsis'
+                       });
+                   }
+
                    dataLabel.attr(dataLabel._attr);
                    dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
                    dataLabel.moved = true;
diff --git a/js/parts/SvgRenderer.js b/js/parts/SvgRenderer.js
index 1f8b71d..fcc629d 100644
--- a/js/parts/SvgRenderer.js
+++ b/js/parts/SvgRenderer.js
@@ -10,7 +10,7 @@ SVGElement.prototype = {
    opacity: 1,
    // For labels, these CSS properties are applied to the <text> node directly
    textProps: ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'color', 
-       'lineHeight', 'width', 'textDecoration', 'textShadow'],
+       'lineHeight', 'width', 'textDecoration', 'textOverflow', 'textShadow'],

    /**
     * Initialize the SVG renderer

J'ai essayé le javascript d'ici (http://jsfiddle.net/CjgLg/13/) et j'obtiens ce qui suit :

Uncaught TypeError : $(...).resizable n'est pas une fonction

La méthode resizable nécessite l'interface utilisateur jQuery.

Ah... importé ces 2 (jquery-ui.css et jquery-ui.min.js) et fonctionne bien maintenant, merci !

J'ai aussi des étiquettes de données coupées.

+1 pour que la solution des points de suspension soit mise en œuvre dans les graphiques élevés.

Pourquoi ce problème est-il clos ? Il a commencé en 2011, mais j'ai toujours ce problème en 2017.

Cela se produit encore

J'utilise la version 5.0.11
Et cela se produit toujours sur le graphique en anneau.