如何在高图中包装图例项? [英] How to wrap legend items in highcharts?

问题描述

我使用highcharts遇到了很大的问题，因为如果它们很长，我已经尝试了数小时来包装图例项目.

I have a big problem using highcharts, because I have been trying for hours to wrap legend items if they very long.

我尝试设置图例和图例项的宽度，但是我的文字仍然不符合图例.我发现的唯一一件事就是更改了highcharts.src.js，但是我认为这不是解决此问题的方法.

I have tried to set legend and legend item width, but my text still get out from a legend. Only thing that I found is to change highcharts.src.js but I think that's not a way to solve this problem.

这是我的代码:

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

推荐答案

实际上设置项目宽度确实可行，可能是一个更好的解决方案.

Actually setting the item width did work, probably a better solution.

设置itemWidth对我不起作用，但是您可以执行以下操作:

Setting the itemWidth doesn't work for me, however you can do something like this:

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/.

这篇关于如何在高图中包装图例项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！