【问题标题】:highcharts y-axis title wraphighcharts y轴标题换行
【发布时间】:2017-03-30 06:27:18
【问题描述】:

我有一个基于参数的高度不同的图表,因此当高度小于标题长度时,y 轴标题在顶部被截断。

http://api.highcharts.com/highcharts/yAxis.title 的 highchart api 指定了一个样式属性,可以在其中给出标题的 CSS 样式,但 javascript wordWrap:'break-word' 在这里不起作用。

我的问题是 - 在这种情况下,是否有任何属性可以包装 y 轴的标题?

注意:我搜索了 SO 并找到了一个问题 - Highcharts Y-axis title text length is more than chart's height,但这并不能回答我的情况,因为我没有静态标题,也不能有
标签来强制换行。

【问题讨论】:

  • 可以发图片吗
  • 请发布您尝试过的代码 sn-p,自动换行在 highcharts 中有效
  • 这是演示问题的小提琴:jsfiddle.net/mxyvnb8v/4

标签: highcharts freemarker word-wrap yaxis


【解决方案1】:

只需在样式中添加固定宽度和步长:

    title: {
                enabled: true,
                text: 'very long title text here that will get cut off at the top when height becomes less than the length of the title',
                style: { 
                    font: 'bold 10pt "Arial Narrow"',                       
                    color: 'rgb(0,0,0)',
                    wordWrap:'break-word',
      // Add these        
                    width : "200px"
                }
            }

你的Fiddle updated here

【讨论】:

  • Nishith,使用固定宽度强制标题换行,是的,谢谢!现在标题仍将被包裹以获得更大的图表高度值,这也不应该是。所以我必须根据图表高度动态计算这个宽度。此外,指定一个偏移值,也是动态计算的,这样包装的标题不会与标签重叠。 “step:1”究竟做了什么?
  • 是的,这实际上是用于标签的,不应该出现在标题的样式中。请删除,当您有很多标签并且您想在步长间隔后跳过时,在 yZxis 标签中使用 Step。
  • 最后我添加了根据图表高度计算的宽度为: events: { load: function() { this.yAxis[0].setTitle({ style: { width: this.chartHeight - 100 } }); } } 在图表的加载事件中
  • 太棒了!!适当的方式
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-19
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多