【问题标题】:highcharts 5.0.14 issue with textOverflowhighcharts 5.0.14 问题与 textOverflow
【发布时间】:2019-09-21 21:13:07
【问题描述】:

升级到 Highcharts 版本 5.0.14 后,我使用 textOverflow: 'ellipsis' 的带有很长标签的条形图之一不再工作了。整个图表在右侧被截断,左侧有很多空白。

我尝试删除以下 x 轴样式配置: textOverflow: 'ellipsis', whiteSpace: 'nowrap',然后图表渲染得很好。但是如果标签文本变得太长并且不希望它换行,我真的需要省略号。所以这不是我理想的解决方案。

在这里查看 jsfiddle 中的问题:https://jsfiddle.net/1so3fezm/2/

我可以通过为 x 轴标签指定 width 以及所需的标签省略号来部分解决问题:

textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 150,但是由于我的图表可以使用不同宽度的选项来呈现,因此修复标签宽度也修复了我的图表宽度,这不是我想要的。任何帮助表示赞赏!

【问题讨论】:

  • 你似乎有xAxis.labels.useHTML: true,但我不确定我看到你在使用它吗?似乎不设置它(或false)可能会避免这个问题?
  • @HalvorHolstenStrand 我永远也想不通!请将其添加为答案,以便我接受。

标签: javascript highcharts bar-chart axis-labels ellipsis


【解决方案1】:

您的示例已激活xAxis.labels.useHTML: true (API)。删除 useHTML 或将其设置为 false 似乎无需任何进一步的操作即可纠正问题,因为您没有积极使用 HTML 功能。

查看this updated JSFiddle 的使用情况。

【讨论】:

  • Halvor Holsten Strand:你说“因为你没有积极使用 HTML 功能”——看起来我需要在这里学习一些关于适当使用配置的知识。我认为 useHTML 会正确呈现标签文本中的任何特殊字符,例如“&”,因此使用了它,但即使没有它,我的图表也会呈现!
猜你喜欢
  • 2019-09-25
  • 1970-01-01
  • 1970-01-01
  • 2013-04-19
  • 2016-08-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多