Comment faire pour envelopper des éléments de légende dans les graphiques

J'ai un gros problème à l'aide de highcharts, cause, j'ai essayé pendant des heures pour envelopper les éléments de la légende s'ils très très long. J'ai essayé de définir la légende et la légende de la largeur de l'objet, mais mon texte encore sortir d'une légende. Seule chose que j'ai trouvé 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>

source d'informationauteur Anuhastik

Edit: en Fait le réglage de la largeur de l'objet a fait un travail, sans doute une meilleure solution.

~~Réglage de la itemWidth ne fonctionne pas pour moi~~mais vous pouvez faire quelque chose comme ceci:

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.

39

Vous pouvez utiliser:
```
legend: {
    itemStyle: {
        width: 90 //or whatever
    },
}
```
Et Highcharts sera emballer les objets pour vous.

Façon à envelopper long nom de légende

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

Réglage de la itemStyle sur la légende a un bug. De longues étiquettes sans les espaces encore ne pas envelopper.

Comment faire pour envelopper des éléments de légende dans les graphiques

Ici est un label convertisseur de fonction qui est renvoyé à un nombre spécifique de caractères (j'ai codé en dur de 20 en elle) et va provoquer une rupture dans les mots qui sont plus 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;
}

Comment faire pour envelopper des éléments de légende dans les graphiques

Il peut être utilisé comme:

legend:{
    labelFormatter: hcLabelRender
}

1

Si vous voulez que tous les éléments sur leurs propres lignes, vous pouvez utiliser
```
legend: {
    layout: "vertical"
}
```
1

comme une note, en 2017, vous pouvez utiliser textOverflow option

legend.itemStyle

Styles CSS pour chaque élément de légende. Seul un sous-ensemble de CSS est pris en charge,
notamment ceux des options liées au texte. La valeur par défaut textOverflow
bien fait de longs textes tronquer. Mis à null d'habillage de texte
au lieu de cela.
0

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 <br> balises manuellement des lignes de rupture.

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

Pour quelqu'un d'autre à l'aide de la useHTML option, vous rencontrerez un problème avec le défaut textOverflow: "ellipsis" réglage de jouer avec votre emballage.

Comme teran a noté ci-dessus, le réglage de textOverflow: null à l'intérieur de itemStyle instantanément fixer votre habillage lorsque useHTML est activé et que vous essayez d'envelopper HTML personnalisé que vous avez écrit à l'intérieur de legendFormatter().

Sans cela, la valeur par défaut de la troncature ne s'applique pas à votre code HTML (par exemple, pas une chaîne de caractères) et seulement des actes comme vous avez overflow: hidden ensemble.

Vous devez vous connecter pour publier un commentaire.