Как обернуть элементы легенды в 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>

highcharts tooltip legend
person Anuhastik    schedule 07.07.2011    source источник
comment
› Единственное, что я нашел, это изменить highcharts.src.js, но я думаю, что это не способ решить эту проблему. Скажите, пожалуйста, что вы изменили в исходном коде?   -  person    schedule 09.07.2011

Ответы (8)


arrow_upward
7
arrow_downward

Редактировать: на самом деле установка ширины элемента сработала, возможно, это лучшее решение.

Настройка 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/.

person johanj    schedule 03.01.2012
comment
Просто хотел предоставить работающую скрипту jsfiddle.net/ArmRM/15041. У меня старый не работает из-за 404 для внешнего скрипта. - person ivkremer; 06.03.2014
comment
‹br/› внутри текста метки прерывает экспорт в изображение. Я экспортирую первую строку. Ширина легенды itemStyle мне не помогает, так как я использую метки под углом 45 градусов, а ширина, похоже, применяется только к горизонтальной ширине. - person Andy Bradbrook; 12.03.2014

arrow_upward
41
arrow_downward

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

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

И Highcharts упакует предметы для вас.

person William Joss Crowcroft    schedule 28.12.2011
comment
У меня проблема с itemStyle... он ломает мой labelFormatter! Я не знаю почему, но если я добавлю тег ‹strong› к возвращаемой строке, он работает хорошо до возврата каретки, после чего строка отображается без жирного шрифта... - person Gianluca; 21.08.2012
comment
@Janky У меня тоже есть эта проблема с разрывами строк, нарушающими стили. Вы придумали решение? - person supertrue; 02.10.2012
comment
@supertrue да, посмотрите здесь highslide.com/forum/ - person Gianluca; 04.10.2012

arrow_upward
8
arrow_downward

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

legend.itemStyle

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

person teran    schedule 14.11.2017

arrow_upward
3
arrow_downward

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

legend: {
    enabled: true,
    width:555,
    itemWidth:500,
    itemStyle: {
        width:500
    }
}
person Rakesh Kumar    schedule 27.01.2016

arrow_upward
1
arrow_downward

Ошибка при установке 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
}
person Stephen Ostermiller    schedule 12.06.2014

arrow_upward
1
arrow_downward

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

legend: {
    layout: "vertical"
}
person AP.    schedule 13.03.2017

arrow_upward
0
arrow_downward

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

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

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

См.: http://www.highcharts.com/ref/#legend--labelFormatter< /а>

person Community    schedule 21.10.2011

arrow_upward
0
arrow_downward

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

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

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

person Sam Griffiths    schedule 27.06.2018