如何在样式模式下将 highcharts-legend-item 的文本溢出 属性 设置为省略号？

Question

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

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

有任何想法吗？ JSFiddle showing the problem.

Answer 1

您可以向标签添加 labelFormatter 函数，该函数将截断图例名称并向图例文本添加标题元素（提供工具提示）。这是一个 setTimeout 等待图表呈现的 hacky 解决方案，但它有效：

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

JSFiddle

编辑： 基于 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);

JSFiddle

Answer 2

另一种方法是在 Highcharts.SVGRenderer.prototype.buildText 核心函数中强制使用省略号。责任线：

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

实时工作演示： http://jsfiddle.net/kkulig/5qj0uL04/