是否可以截斷Highcharts/Highstock中的圖例項目

Question

使用響應網站的頁面寬度可以收縮和展開，圖例中的項目是否可以截斷？

聯賽冠軍可能是相當長的，所以最好我想設置圖例項是95％左右的圖表，然後添加省略號如果他們太久。

我使用HTML圖例，並用CSS應用省略號但是這是行不通的嘗試。任何幫助將是偉大的，謝謝。

Answer 1

只要使用labelFormatter函數就可以對圖例中的標籤進行任何操作。

// ... initialization of chart 
legend: { 
    labelFormatter: function() { 
     // do truncation here and return string 
     // this.name holds the whole label 
     // for example: 
     return this.name.slice(0, 15)+'...' 
    } 
} 

這裏的工作示例http://jsbin.com/oyicuc/12/edit

編輯（基於評論如下）。

如果你想更好地控制標籤的文本的行爲，設置useHTML屬性爲true（圖中的圖例配置），然後就可以用CSS更好地定位它。這裏是它的例子http://jsbin.com/oyicuc/20/edit。

爲了使其響應，您可以偵聽重繪圖表事件並相應地修改標籤的css。

Answer 2

這與@ WTK的答案類似，但它只截取比所需長度更長的標籤。

formatter: function() { 
    //Truncate very long labels 
    var max = 20; 
    var val = this.value; 
    return (val.length > max ? val.slice(0, max) + '...' : val); 
} 

Answer 3

我把WTK的解決方案（感謝它的方式），並增加了幾個簡單的事情了 - 認爲它可能幫助別人。 （編輯：哎呦 - 錯過了克里斯的職位 - 與他的相似也，但與寬度方面的考慮）

1. 指定在圖表的左側邊緣的寬度 - 這決定了標籤有多大的空間 - 這是非常重要的如果您的圖表水平擴展到您的頁面 - 如果標籤面積不夠大，截斷某個字符限制會導致問題。

2. 指定勾選長度以匹配保證金。

3. 檢查字符串的長度 - 如果它比我想要的大（即，如果它要打包/導致問題）我截斷它 - 否則沒有意義將橢圓（...）附加到它。這基本上意味着：

   • 檢查它是否是24（對我來說）字符，如果是截斷了三份字符短（21）和橢圓追加到溫度值。製作24個字符標籤和截斷標籤的長度仍然看起來很相似。如果長度不超過24 - 不需要截斷，並且temp var被設置爲字符串的全長。

   • 而不是隻吐出了標籤的刪減版本，我包裹標籤與標題的跨度。允許用戶將鼠標懸停在標籤上並獲取值的全名。

4. useHTML output for span/title。

希望這可以幫助別人:)

chart: { 
    // usual setup stuff here 
    marginLeft: 160 // #1 
} 

// ... 

xAxis: { 
    // ... 
    tickLength: 160, // #2 
    labels: { 
     // ... 
     formatter: function() { 
      var temp = this.value.length > 24 ? this.value.slice(0, 21)+'...' : this.value; // #3 
      return '<span title="Investment breakdown for '+ this.value +'">' + temp + '</span>'; // #3 
     }, 
     useHTML: true // #4 
} 

Answer 4

最新版本（4.1.1）Highcharts版本支持內嵌樣式截斷。 所以，你可以這樣做：

legend:{ 
    itemStyle: { 
      width:'50px', 
      textOverflow: 'ellipsis', 
      overflow: 'hidden' 
     } 
} 

http://jsfiddle.net/awq913h1/

---

相關github上的問題：https://github.com/highcharts/highcharts/issues/3331
相關的jsfiddle：http://jsfiddle.net/highcharts/d4johssh/