如何为highcharts JS在y轴上设置日期时间的30秒间隔

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]

    }]
});
});

Example

我希望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>