如何在樣式模式下將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.

來源

2017-10-17 Zane Spalding

難道你需要某種寬度一套文本溢出？ – 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

來源

2017-10-18 11:26:47 Dmitry

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

另一種方法是強制省略號Highcharts.SVGRenderer.prototype.buildText的核心功能。負責線路：

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

帶電作業演示：http://jsfiddle.net/kkulig/5qj0uL04/

來源

2017-10-19 10:32:32

我做了一個較短版本的解決方案。 – Dmitry

如何在樣式模式下將highcharts-legend-item的文本溢出屬性設置爲省略號？

回答

相關問題