在Highcharts中为图例添加最大宽度

Question

我创建了一个柱形图，其水平 左中传奇 。

但是使用这种配置（水平+中间+左），图表几乎不可见。

传奇应该被包裹而不是占用所有可用的地方。

解决方案是将最大宽度设置为图例。但是我该怎么做呢？

以下是一个示例：http://jsfiddle.net/zjp8m60w/

{{1}}

谢谢！

Answer 1

如何更改以垂直对齐它们，以便它们不会覆盖图形。使用itemWidth参数，您可以设置标签的宽度。

legend: {
    align: 'left',
    verticalAlign: 'middle',
    floating:false,
    itemWidth: 80,
    floating: false,
    layout: 'vertical'
}

更新了JSfiddle here

使用自动换行水平对齐

legend: {
    align: 'left',
    verticalAlign: 'middle',
    floating: false,
    width: 175,
    layout: 'horizontal',
    itemStyle : '{ "word-wrap": "break-word"}'
}

请参阅JSFiddle here

Answer 2

以上示例是固定宽度（而不是最大宽度）。您可以这样实现最大字符宽度：

labelFormatter: function () {
            const newName = this.name.substring(0, Math.min(this.name.length, 22));

            return newName.length === this.name.length ? newName : newName + "...";
        },

这是图例设置中的内容。