是否可以截断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/