2

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

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

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

4

4 回答 4

9

最新 (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/

于 2015-02-19T19:25:29.723 回答
7

可以对图例中的标签做任何事情，只需使用 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。

于 2013-03-12T10:51:08.743 回答
0

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

formatter: function () {
    //Truncate very long labels
    var max = 20;
    var val = this.value;
    return (val.length > max ? val.slice(0, max) + '...' : val);
}
于 2014-04-10T14:49:58.187 回答
0

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

  1. 指定图表左侧边距的宽度 - 这决定了标签有多少空间 - 如果您有一个水平缩放到页面的图表，这很重要 - 如果区域为标签不够大。

  2. 指定刻度长度以匹配边距。

  3. 检查字符串的长度 - 如果它比我想要的大（即，如果它要换行/导致问题），我会截断它 - 否则将省略号 (...) 附加到它上面是没有意义的。这基本上意味着：

    • 检查它是否是 24 个（在我的情况下）字符长，如果它被截断三个字符（21 个）并将省略号附加到临时值。制作 24 字符标签和截断标签的长度看起来仍然相似。如果长度不超过 24 - 不需要截断并且 temp var 设置为字符串的全长。

    • 我不只是吐出标签的截断版本，而是将标签包装在带有标题的跨度中。允许用户将鼠标悬停在标签上并获取值的全名。

  4. 跨度/标题使用 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
}
于 2014-09-19T03:23:52.773 回答