Javascript 如何在样式化模式下将highcharts图例项的文本溢出属性设置为省略号？

我正在尝试将图例项截断为省略号，并将鼠标悬停在图例项上以显示全名。
我的传奇

highchart.legend = {
                enabled: true,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                navigation: { enabled: true },
                width: 100
            };

因为我在样式化模式下使用highcharts，所以这不起作用。

itemStyle: {
    textOverflow: 'ellipsis',
    overflow: 'hidden'
},

我在CSS中尝试过这个，但没有任何运气。

.highcharts-legend-item text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

---

有什么想法吗

您可以向标签添加

labelFormatter

函数，该函数将截断图例名称，并向图例文本添加标题元素（提供工具提示）。这是一个黑客解决方案，它使用

setTimeout

等待图表渲染，但它可以工作：

labelFormatter: function() {
    var cut = 5,
        fullName = this.name;
    if (this.name.length > cut) {
      setTimeout(function() {
        let child = document.createElementNS("http://www.w3.org/2000/svg",'title');
        child.innerHTML = fullName;
        document.querySelector(".highcharts-legend-item.highcharts-series-" + 
                               this.index).childNodes[0].appendChild(child);
      //if you have more then 1 chart at the page 
      //then you'll need to add the container id to the querySelector
      }.bind(this),200)
      return this.name.substr(0, cut) + "...";
    }
    return this.name;
  }

编辑： 基于Kamil Kulig的解决方案，我使用包装器函数制作了一个更短、更简单的解决方案：

(function(H) {
  var old_buildText = H.SVGRenderer.prototype.buildText;
  H.SVGRenderer.prototype.buildText = function(wrapper) {
    wrapper.styles = wrapper.styles || {};
    wrapper.styles.textOverflow = 'ellipsis';
    old_buildText.call(this, wrapper);
    }
})(Highcharts);

---

另一种方法是在

Highcharts.svgrender.prototype.buildText

核心函数中强制省略号。责任线：

  ellipsis = true, //textStyles && textStyles.textOverflow === 'ellipsis', // force ellipsis

---

实时工作演示：

您不需要设置某种宽度以使文本溢出吗？对，我编辑了文章以显示我的图例，我将宽度设置为100，然后文本溢出。但它溢出了我不想要的文本包装。我已经编辑了其中一个并使用了图例的配置，它确实截断了文本。你能编辑并保存它来重现你的问题吗？我认为这里的演示不适用，因为我们使用的是样式化模式代码库，它的执行方式与style by JS版本不同。这表明我遇到的问题是黑客行为，但比我以前做的黑客行为要好得多。非常感谢。我为你的解决方案做了一个简短的版本。