Warm tip: This article is reproduced from serverfault.com, please click
其他-如何防止高位图用省略号缩短标签
(其他 - How to prevent highcharts from shortening labels with ellipsis)
发布于 2015-06-19 10:02:26
Highcharts正在截断子弹图上的x轴标签。我想防止这种情况的发生，并始终显示全文而不缩短。
我试过了
.highcharts-container { overflow: visible !important; }
.highcharts-axis-labels text
{
overflow: visible !important;
}
但是似乎SVG正在执行截断和省略号，而不是CSS，因为你可以通过查看呈现的标记来判断。
<text x="229.0625" style="color: rgb(96, 96, 96); cursor: default; font-size: 9px; padding: 0px; fill: rgb(96, 96, 96);" text-anchor="middle" transform="translate(0,0)" y="32" opacity="1">
<tspan>47…</tspan>
<title>47.5k</title>
</text>
我尝试在javascript中添加以下属性：
labels: {
autoRotation: false,
style: {
width: '200px',
'min-width': '200px'
},
但这是行不通的。如何防止Highchart截断标签文本？
Questioner
Dan Cook
Viewed
11
这对我不起作用，原因似乎是Highcharts使用<svg>元素进行渲染，因此，当轴标签被省略号截断时，省略号字面意义就在文本中，我认为这是基于HC计算得出的在其渲染过程中。同样，在CSS中，设置
text-overflow为“无”不会停止截断文本，仅删除省略号即可。这是overflow需要被设置为“可见”。尽管没有简单的解决方案，但这里有一些关于此问题的见解：github.com/highcharts/highcharts/issues/3941