Highcharts XRange数据和标签错位

Question

我正在尝试使用Highcharts xrange chartType实现时间轴小部件

基本结构是YAxis类别：代理名称，在线/离线/休息/等的X轴时间轴数据

我发现YAxis标签与每个类别的实际条形图不对齐 - 我在网上找到的两个解决方案是使用pointPadding / groupPadding，这导致条形很薄，看不见。另一种方法是定义pointWidth 20以确保您可以看到每个条形但是没有重叠条形图的保护... LAME但是通过添加YAxis滚动条解决了 - 但是这并不能解决有时标签位于条形图之间的问题等等

它有点难以在jsfiddle bc中复制它是一个静态大小的图形，而不是在我的产品中动态调整尺寸，但这是我当前状态https://jsfiddle.net/bj7y3dwv/5/#run的一个很好的例子

'yAxis': {
      'categories': agents,
      'min': 0,
      'max': agents.length < maxY ? agents.length - 1 : maxY,
      'scrollbar': {
        'enabled': true,
        'showFull': false,
        'barBackgroundColor': '#ccc',
        'barBorderRadius': 7,
        'barBorderWidth': 0,
        'buttonBorderWidth': 0,
        'buttonArrowColor': 'transparent',
        'buttonBackgroundColor': 'transparent',
        'rifleColor': 'transparent',
        'trackBackgroundColor': '#F3F3F3',
        'trackBorderColor': 'transparent',
        'height': 10,
        'minWidth': 25
      },
      'reversed': true,
      'tickmarkPlacement': 'on',
      'gridLineColor': 'transparent'
    },

Answer 1

只需设置dataLabels.overflow = 'allow'。默认值为“justify”，用于对齐绘图区域内的标签。

码：

series: [{
  data: [{
    ...
  }],
  dataLabels: {
    enabled: true,
    overflow: 'allow',
    crop: true
  }
}]

演示：

• https://jsfiddle.net/BlackLabel/apxft8kj/

Answer 2

这与plotOptions分组false有关，这会阻止highcharts为每个系列保留每个类别中的空间