Как обернуть элементы легенды в highcharts

У меня большая проблема с использованием highcharts, потому что я часами пытаюсь обернуть элементы легенды, если они очень длинные. Я попытался установить легенду и ширину элемента легенды, но мой текст все еще выходит из легенды. Единственное, что я нашел, это изменить highcharts.src.JS, но я думаю, что это не способ решить эту проблему. Вот мой код: 

<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>
14
highcharts legend tooltip wrap

8 ответов

Edit: на самом деле установка ширины элемента действительно работала, вероятно, лучшее решение.

установка itemWidth не работает для меня, однако, вы можете сделать что-то вроде этого:

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(' ');
}

см.http://jsfiddle.net/ArmRM/13520/ для примера.

7

вы можете использовать:

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

и Highcharts обернет элементы для вас.

39

способ обернуть длинное имя легенды

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

обратите внимание, что в 2017 году вы можете использовать textOverflow опции

legend.itemStyle

стили CSS для каждого элемента легенды. Поддерживается только подмножество CSS, особенно те варианты, которые связаны с текстом. по умолчанию textOverflow свойство делает длинные тексты усеченными. Установить null Обтекание текстом вместо.

2

установка itemStyle в легенде имеет ошибку. Длинные этикетки без пробелов до сих пор не обернуты.

вот функция визуализации меток, которая обертывает определенное количество символов (я жестко закодировал 20 в нее) и заставит перерыв в словах, которые длиннее этого:

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;
}

его можно использовать как:

legend:{
    labelFormatter: hcLabelRender
}
1

Если вы хотите, чтобы все элементы на отдельных строках, вы можете использовать

legend: {
    layout: "vertical"
}
1

можно использовать

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

в вашей метке, и вы можете добавить HTML-теги в форматер. В этом случае вы можете добавить <br> теги для ручного разрыва строк.

см.: http://www.highcharts.com/ref/#legend--labelFormatter

0

для всех, кто использует useHTML опция, вы столкнетесь с проблемой по умолчанию textOverflow: "ellipsis" настройки возиться с вашей упаковки.

как отметил Теран выше, установка textOverflow: null внутри itemStyle мгновенно исправит вашу упаковку, когда useHTML включен, и вы пытаетесь обернуть Пользовательский HTML, который вы написали внутри legendFormatter().

без этого усечение по умолчанию не применяется к вашему HTML (например, не строка) и просто действует так, как у вас есть overflow: hidden set.

0