Блог

У меня есть график, ось 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 выглядела как показано на рисунке ниже

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

вы можете ознакомиться с полным рабочим фрагментом ниже:

 $(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>