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。

Answer 3

这类似于@ WTK的答案，但它只截断超过所需长度的标签。

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

Answer 4

我采用了WTK的解决方案（顺便说一句，感谢它）并添加了一些简单的东西 - 认为它可能对某人有所帮助。（编辑：哎呀 - 错过克里斯的帖子 - 与他的相似但也有宽度考虑）

指定图表左侧边距的宽度 - 这决定了标签的空间大小 - 如果您的图表水平缩放到您的页面，这一点很重要 - 截断某个字符限制将会如果标签的区域不够大，则会导致问题。
指定与边距匹配的刻度线长度。
检查字符串的长度 - 如果它大于我想要的长度（即它是否会包装/导致问题）我会截断它 - 否则没有任何附加点椭圆（...）到它。这基本上意味着：
- 检查它是否为24（在我的情况下）字符长，如果它是截断三个字符短（21）并将省略号附加到临时值。制作24个char标签和截断标签的长度看起来仍然相似。如果长度不超过24 - 则不需要截断，并且temp var设置为字符串的全长。
- 我将标签包装在带标题的范围内，而不仅仅是吐出标签的截断版本。允许用户将鼠标悬停在标签上并获取值的全名。
使用跨度/标题的HTML输出。

希望这有助于某人：）

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
}

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

4 个答案: