График отображения линий сетки по оси y для каждой точки

#highcharts #angular6

#диаграммы высот #angular6

Вопрос:

Я использую столбчатую диаграмму highchart. Поскольку мое максимальное значение по оси y равно 10, а минимальные значения равны 0. Я хочу показать линии сетки для всех точек от 0 до 10. Если высота диаграммы меньше 185 пикселей, то отображаются только пять линий сетки, а если она больше 185 пикселей, то отображаются линии сетки для всех точек. Я попытался установить тиковый интервал, но минимальный, который я установил на 0.1, показывает только 8 линий сетки. Мой код по оси y — это

 yAxis: {
      min: 0,
      max: 10,
      tickInterval: 0.1,
      title: {
        text: '',
        align: 'high'
      },
      labels: {
        x: 1,
        y: 3,
        formatter: function() {
          if (this.pos === 0 || this.pos === 5 || this.pos === 10) {
            return this.pos;
          }
        }
      }
    }
  

Как я могу заставить его отображать все линии сетки для каждой точки? Спасибо.

Ответ №1:

В API мы можем прочитать:

tickInterval: число

Если интервал tickInterval слишком плотный для отображения меток, Highcharts может удалить отметки.

Чтобы отобразить все отметки, используйте tickAmount свойство:

 yAxis: {
    ...,
    tickAmount: 11
}
  

Живая демонстрация: http://jsfiddle.net/BlackLabel/oqu8hkn9 /

API:

https://api.highcharts.com/highcharts/yAxis.tickInterval

https://api.highcharts.com/highcharts/yAxis.tickAmount

Комментарии:

1. Большое вам спасибо. Сегодня вы помогли мне решить две проблемы. Большое вам спасибо!

Ответ №2:

Вам нужно установить свойства линии сетки, чтобы достичь того, что вам нужно.

Вот пример с 10 линиями сетки, показанными всегда. Это настроено следующим образом:

 yAxis: {
  minorGridLineWidth: 1,
  minorTickInterval: 1,
  gridLineWidth: 0,
  ...
}
  

Рабочий JSFiddle: https://jsfiddle.net/ewolden/1cm6qd0n/8 /

API для линий сетки: https://api.highcharts.com/highcharts/yAxis.minorGridLineWidth