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

问题描述：

我想将图例项目截断为省略号并在其上方悬停显示全名。
我的传说
如何在样式模式下将highcharts-legend-item的文本溢出属性设置为省略号？

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.

难道你需要某种宽度一套文本溢出？ – zgood

右键我编辑帖子以显示我的图例，我将宽度设置为100，然后溢出。但它通过我不想要的文本包装溢出。 –

我已经编辑了[高图表演示中的一个小提琴]（http://jsfiddle.net/h5q7mv5p/），并使用您的配置的图例，它会截断文本。你能编辑它并保存它以重现你的问题吗？ – zgood

答

您可以将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; 
    }

JSFiddle

编辑： 基于卡米尔·库利格的解决方案，我做了一个更短，少哈克解决方案使用包装函数：

(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

这很冒昧，但比我正在做的黑客要好得多。谢谢！ –

答

另一种方法是强制省略号Highcharts.SVGRenderer.prototype.buildText的核心功能。负责线路：

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

带电作业演示：http://jsfiddle.net/kkulig/5qj0uL04/

我做了一个较短版本的解决方案。 – Dmitry

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

相关推荐