15

我在使用 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>
4

8 回答 8

41

您可以使用：

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

Highcharts 会为您包装这些物品。

于 2011-12-28T09:13:42.617 回答
8

作为说明，在 2017 年，您可以使用textOverflow选项

legend.itemStyle

每个图例项的 CSS 样式。仅支持 CSS 的一个子集，尤其是那些与文本相关的选项。默认textOverflow 属性使长文本被截断。将其设置null为换行。

于 2017-11-14T15:00:35.727 回答
7

编辑：实际上设置项目宽度确实有效，可能是一个更好的解决方案。

设置 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/ 。

于 2012-01-03T14:12:37.783 回答
3

包装长图例名称的方法

legend: {
    enabled: true,
    width:555,
    itemWidth:500,
    itemStyle: {
        width:500
    }
}
于 2016-01-27T05:00:45.567 回答
1

在图例上设置 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
}
于 2014-06-12T17:21:16.587 回答
1

如果您希望所有项目都在自己的行中，您可以使用

legend: {
    layout: "vertical"
}
于 2017-03-13T20:57:48.270 回答
0

您可以使用

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

在您的标签中，您可以在格式化程序中添加 html 标签。在这种情况下，您可以添加<br>标签以手动换行。

请参阅： http ://www.highcharts.com/ref/#legend--labelFormatter

于 2011-10-21T21:56:32.240 回答
0

对于使用该useHTML选项的其他人，您将遇到默认textOverflow: "ellipsis"设置与包装混淆的问题。

如上所述，设置textOverflow: nullinsideitemStyle将在启用时立即修复您的包装，useHTML并且您正在尝试包装您在其中编写的自定义 HTML legendFormatter()。

没有这个，默认截断不适用于您的 HTML（例如，不是字符串），就像您overflow: hidden设置的那样。

于 2018-06-27T13:41:52.080 回答