Смещение данных и меток Highcharts XRange - PullRequest
Новая
       53

Смещение данных и меток Highcharts XRange

0 голосов
/ 11 марта 2019

Я пытаюсь реализовать виджет шкалы времени, используя Highcharts xrange chartType

Базовая структура: YAxis Категории: Имя агента, Данные временной шкалы оси X для Online / Offline / Break / etc

Я обнаружил, что метки YAxis не совпадают с фактическим столбцом для каждой категории - два решения, которые я нашел в Интернете, заключались в использовании 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'
    },

example of yAxis to data misalignment

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

Это было связано с ложной группировкой plotOptions, которая препятствовала тому, чтобы старшие диаграммы резервировали место в каждой категории для каждой серии

0 голосов
/ 12 марта 2019

Просто установите dataLabels.overflow = 'allow'.По умолчанию используется значение «justify», которое выравнивает метки внутри области графика.

Код: 

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

Демонстрация:

...