Как установить интервал 30 секунд для даты и времени по оси Y для старших графиков JS

Question

У меня есть график, ось Y на графике должна показывать минуты с разбивкой на 30 секунд.Я должен отобразить ось Y как 2:00, 2:30 ... 5:30.Данные, которые я получаю от сервиса, находятся в секундах.

Я хотел бы добавить время по оси Y и указать график в соответствии с данными.

Я нашел пример, в котором есть часы и минуты, однако я не могу изменитьв минуты и секунды с моими желаемыми значениями

$(function () {
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec']
    },
    yAxis: {
        title: {
            text: 'Time (hh:mm)'
        },
        labels: {
            formatter: function () {
                var time = this.value;
                var hours1=parseInt(time/3600000);
                var mins1=parseInt((parseInt(time%3600000))/60000);
                return hours1 + ':' + mins1;
            }
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]

    }]
});
});

Пример

Я хочу, чтобы ось Y выглядела как на картинке ниже

Answer 1

Выполнил пример с некоторыми простыми данными, чтобы вы могли увидеть результаты, отраженные ... Ключом было использование tickInterval ... после этого нам просто нужно было отформатировать время, чтобы оно выглядело как время (с двоеточием), вместо больших чисел, изображающих секунды.

вы можете проверить полный рабочий фрагмент ниже:

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ]
    },
    yAxis: {
      title: {
        text: 'Time (hh:mm:ss)'
      },
      tickInterval: 30,

      labels: {
        formatter: function() {
          var time = this.value;
          var mins = parseInt(time / 60);
          var secs = time % 60;
          if (secs == 0) {
            return mins + ':00';
          } else {
            return mins + ':' + secs;
          }
        }
      }
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    series: [{
      name: 'Tokyo',
      data: [30, 60, 120, 45, 240, 360, 280, 45, 90, 180, 270, 0]

    }]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>