HighCharts - заполнение Y-Axis на гистограмме

Я использую стиль ярлыков оси Y, в котором каждое число помещается с выравниванием по левому краю поверх его соответствующей горизонтальной линии сетки, как показано на рисунке ниже.

Единственное усложнение этого в HighCharts заключается в том, что метки меток иногда перекрываются с первым столбцом в диаграмме столбцов.

Обновлено демо: Пример: см. эту диаграмму: http://jsfiddle.net/NWsgz/1/

y-axis issue in highcharts

Я попытался достичь этого, используя xAxis.minpadding, но это свойство, похоже, не влияет на диаграммы столбцов. Есть ли способ в Highcharts получить эффект, который я собираюсь сделать? Я мог бы теоретически получить эффект, сделав бары очень узкими, но я ищу другое решение.

Ответы

Ответ 1

Это не работает для категорированной оси - в этом типе ось делится на равные категории, поэтому минимальное дополнение не допускается.

Возможное решение - использовать стандартную ось, но использовать ось formatter для оси, см. http://jsfiddle.net/NWsgz/4/

Ответ 2

Я придумал обходной путь, но это не идеально.

  • Отделите yAxis от диаграммы, используя yAxis.offset
  • Используйте слишком длинные отметки для имитации линий сетки, расположенных влево

Вот так:

yAxis: {
  offset: 30,
  tickLength: 30, // Same value as offset
  tickPosition: "inside",
  tickWidth: 1,
  tickColor: "black", // The same as your gridLine color
  labels: { 
    align: 'left',
    x: 0,
    y: -8 // Position labels above their gridLine/tickMark
  }
}

Для демонстрации см. http://jsfiddle.net/supertrue/NWsgz/2/

Почему это не идеально

Я хочу, чтобы мои gridLines использовали стиль тире (например, dashStyle: 'longdash'), но, похоже, не существует способа применить тире к тикам меток.

Мне бы хотелось услышать, есть ли способ сделать это, или лучшее обходное решение.