0

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

基本结构是 YAxis Categories : Agent Name , X Axis Timeline data for Online/Offline/Break/etc

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

在 jsfiddle 中复制有点困难，因为它是一个静态大小的图表，而不是在我的产品中动态调整大小，但这是我当前状态的一个很好的例子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'
    },

yAxis 与数据未对齐的示例

4

2 回答 2

0

刚设置dataLabels.overflow = 'allow'。默认值为“justify”，它在绘图区域内对齐标签。

代码：

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

演示：

于 2019-03-12T11:01:30.940 回答
0

这与 plotOptions grouping false 有关，这阻止了 highcharts 为每个系列在每个类别中保留空间

于 2019-05-06T17:53:59.083 回答