web-dev-qa-db-fra.com

Comment envelopper les éléments de légende dans les graphiques en haut

J'ai un gros problème en utilisant les graphiques en hauteur, parce que j'essaie d'envelopper des articles de légende s'ils sont très longs. J'ai essayé de définir la largeur de la légende et des éléments de légende, mais mon texte reste en dehors d'une légende. La seule chose que j’ai trouvée est de changer highcharts.src.js mais je pense que ce n’est pas une façon de résoudre ce problème. Voici mon code: 

<script type="text/javascript">
        var chart;
        $(document).ready(function() {
             chart = new Highcharts.Chart({
                chart: {
                renderTo: 'graph_container',
                    defaultSeriesType: 'line',
                    zoomType: 'y',
                     marginRight: 130,
                      marginBottom: ${marginBottom}
                },
                  title: {
                    x: -10, 
                    text: null
                 },
                  xAxis: {
            title: {
               text: '<fmt:message key="html.time" bundle="${msg}"/>',
                align: 'high'
             },
             categories: [${years}]
        },
            yAxis: {
                  title: {
                  text: '<fmt:message key="html.value" bundle="${msg}"/>',
                     align: 'high'
            },
            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                             }]
                          },
             tooltip: {
                style: {
                    fontSize: '9pt',
                    width: '400px',//,
                     wrap:'hard'                                
                            },
                formatter: function() {
                 return '<b>' + this.series.name + '<br>' +
                      + this.x +': '+ this.y + '</b>';
                }
            },
             legend: {
                layout: 'vertical',
                 width: 600,
                 floating: true,
                align: 'center',
                verticalAlign: 'bottom',
                 borderWidth: 1,
                  itemWidth: '500px'

             },
            credits: {
                    enabled: false
            },
                        exporting: {
                            enabled: false
                        },      
            series: [
             <c:forEach items="${graphValues}" var="value" varStatus="counter">
                    <c:if test="${counter.count != 1}">,</c:if>
                        {
                        name: '${value.name}',
                        data: ${value.jsonData}
                    }
            </c:forEach>
            ]
             });


                    });

    </script>
tooltipwraphighchartslegend
14
Anuhastik

Edit: En fait, définir la largeur de l'élément a fonctionné, probablement une meilleure solution.

La définition de l'élémentWidth ne fonctionne pas pour moiCependant, vous pouvez faire quelque chose comme ça:

labelFormatter: function() {
    var words = this.name.split(/[\s]+/);
    var numWordsPerLine = 4;
    var str = [];

    for (var Word in words) {
        if (Word > 0 && Word % numWordsPerLine == 0)
            str.Push('<br>');

        str.Push(words[Word]);
    }

    return str.join(' ');
}

Voir http://jsfiddle.net/ArmRM/13520/ pour un exemple.

7
johanj

Vous pouvez utiliser:

legend: {
    itemStyle: {
        width: 90 // or whatever
    },
}

Et Highcharts va emballer les articles pour vous.

40
William Joss Crowcroft

comme note, en 2017, vous pouvez utiliser l'option textOverflow

legend.itemStyle

Styles CSS pour chaque élément de légende. Seul un sous-ensemble de CSS est pris en charge, , Notamment les options liées au texte. La propriété par défaut textOverflow Rend les textes longs tronqués. Réglez-le sur null pour envelopper le texte À la place.  

3
teran

Manière d'envelopper le long nom de légende

legend: {
    enabled: true,
    width:555,
    itemWidth:500,
    itemStyle: {
        width:500
    }
}
3
Rakesh Kumar

Si vous voulez que tous les articles soient sur leurs propres lignes, vous pouvez utiliser

legend: {
    layout: "vertical"
}
1
AP.

Le paramétrage de l'élément style sur la légende présente un bogue. Les longues étiquettes sans espaces ne sont toujours pas bouclées.

Voici une fonction de rendu d'étiquette qui encapsule un nombre spécifique de caractères (j'y ai codé de manière stricte 20) et forcera une rupture dans les mots plus longs que cela:

function hcLabelRender(){
    var s = this.name;
    var r = "";
    var lastAppended = 0;
    var lastSpace = -1;
    for (var i = 0; i < s.length; i++) {
        if (s.charAt(i) == ' ') lastSpace = i;
        if (i - lastAppended > 20) {
            if (lastSpace == -1) lastSpace = i;
            r += s.substring(lastAppended, lastSpace);
            lastAppended = lastSpace;
            lastSpace = -1;
            r += "<br>";
        }
    }
    r += s.substring(lastAppended, s.length);
    return r;
}

Il peut être utilisé comme: 

legend:{
    labelFormatter: hcLabelRender
}
1
Stephen Ostermiller

Pour quiconque utilisant l'option useHTML, vous rencontrerez un problème lié au paramètre par défaut textOverflow: "Ellipsis" qui perturbera votre retour à la ligne.

Comme indiqué ci-dessus, définir textOverflow: null dans itemStyle résoudra instantanément votre habillage lorsque useHTML est activé et que vous essayez de convertir le code HTML personnalisé que vous avez écrit dans legendFormatter().

Sans cela, la troncature par défaut ne s'applique pas à votre code HTML (par exemple, pas une chaîne) et agit comme si vous aviez overflow: hidden défini.

0
Sam Griffiths

Vous pouvez utiliser

labelFormatter: function() {
    return this.name; // insert your formatter function here
}

dans votre étiquette et vous pouvez ajouter des balises html dans le formateur. Dans ce cas, vous pouvez ajouter des balises <br> pour séparer manuellement les lignes.

Veuillez consulter: http://www.highcharts.com/ref/#legend--labelFormatter

0
user500074