是否可以在Highcharts/Highstock中截断图例项

Question

使用页面宽度可以缩小和扩展的响应式网站,图例中的项目是否可以截断？

系列标题可能很长,所以理想情况下我想将图例项设置为图表的95%左右,如果它们太长则添加省略号.

我已经尝试使用HTML作为图例并使用CSS应用省略号但是这不起作用.任何帮助都会很棒,谢谢.

Answer 1

Highcharts的最新版本(4.1.1)支持截断的内联样式.所以你可以这样做:

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/

Answer 2

可以使用图例中的标签执行任何操作,只需使用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.