7
votes

Traiter avec la marque de graphique à tarte chevauchée [Highchartts]

Mon tableau est laid et je ne suis pas sûr de quoi faire à ce sujet. C'est moche parce que les étiquettes se chevauchent et sont à peine lisibles. Idées que j'ai déjà envisagées:

  • Masquer les étiquettes pour de petites tranches. Cela a le négatif évident de moins d'informations visibles, en particulier lorsque la page est imprimée. Nos utilisateurs impriment beaucoup.
  • alterner de gros tranches et de petites tranches. Pas idéal car il réduit l'organisation de l'information et peut souffrir de temps en temps du même problème.
  • Placez manuellement chaque étiquette avec des positions fixes. Solution coûteuse en ce qui concerne le temps de mise en œuvre et la maintenance du code.

    Quelqu'un a-t-il une meilleure idée? Je souhaite que Highcharts ait pu détecter le chevauchement et faire quelque chose à ce sujet automatiquement. Voici la photo:

    Le chevauchement des étiquettes sur ce tableau est évidemment un problème


0 commentaires

3 Réponses :


7
votes

J'ai trouvé un highcharts Sujet de forum lié ​​à la rotation du graphique à secteurs afin de mieux distribuer des étiquettes dans Ce type de cas, mais il implique de modifier la source de trouver la ligne suivante et de modifier la référence cumulative à zéro: xxx pre>

une option qui n'est pas optimale mais que cela pourrait fonctionner est de rotate Les données sont des étiquettes de quelques degrés afin qu'ils ne se chevauchent pas, comme: P>

{
    plotOptions : {
        pie : {
            dataLabels : {
                rotation : 15
            }
        }
    }
}


0 commentaires

9
votes

Il y a une nouvelle option dans Highchartts pour définir l'initiarre du graphique à secteurs. Vous pouvez utiliser l'initiarre pour organiser toutes les petites tranches situées sur le côté droit du graphique, permettant ainsi davantage d'étiquettes de s'adapter.

series: [{
    startAngle: 90
}]


1 commentaires

Cette suggestion a définitivement mérite. J'ai comparé les graphiques avec et sans l'option (et avec plus de congestion) ici: jsfiddle.net/dk9cd/ 40



0
votes

Je rencontre aussi le même problème. J'ai corrigé le problème avec le code ci-dessous.

plotOptions : {
    pie : {
        dataLabels : {
            whiteSpace: 'nowrap', 
            overflow: 'hidden',
            textOverflow: 'ellipsis'
        }
    }
}


1 commentaires

Sachez simplement que j'ai posé cette question il y a 8 ans, alors vous pourrait faire face à une version différente de Highcharts.