Question

我正在尝试创建一个Highcharts图表，其中yAxis数据的时间以毫秒为单位。我希望yAxis标签能够显示时间，即秒，分钟等。我尝试过设置yAxis.type =＆＃39; datatime＆＃39;但那是转换为实际日期。没有它，使用下面的示例，我的yAxis从0转到100 M，原因很明显。

[[1522187288000, 79692000], [1523314079000, 60000]]

这是我的配置，其中plot是上面的数据：

{
  chart: {
    type: 'line'
  },
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  yAxis: {
    title: {
      text: null
    }
  },
  xAxis: {
    type: 'datetime'
  },
  legend: {
    enabled: false
  },
  series: [{
    'data': plot
  }],
  plotOptions: {
    series: {
      animation: {
        duration: 0
      }
    }
  },
}

编辑：我还需要我的点标签来匹配yAxis。

Answer 1

结合这些问题的答案： custom Y axis formatter converting time interval into human readable form我们得到：

function millisecondsToStr (milliseconds) {
    // TIP: to find current time in milliseconds, use:
    // var  current_time_milliseconds = new Date().getTime();

    function numberEnding (number) {
        return (number > 1) ? 's' : '';
    }

    var temp = Math.floor(milliseconds / 1000);
    var years = Math.floor(temp / 31536000);
    if (years) {
        return years + ' year' + numberEnding(years);
    }
    //TODO: Months! Maybe weeks? 
    var days = Math.floor((temp %= 31536000) / 86400);
    if (days) {
        return days + ' day' + numberEnding(days);
    }
    var hours = Math.floor((temp %= 86400) / 3600);
    if (hours) {
        return hours + ' hour' + numberEnding(hours);
    }
    var minutes = Math.floor((temp %= 3600) / 60);
    if (minutes) {
        return minutes + ' minute' + numberEnding(minutes);
    }
    var seconds = temp % 60;
    if (seconds) {
        return seconds + ' second' + numberEnding(seconds);
    }
    return 'less than a second'; //'just now' //or other string you like;
}

...

yAxis: {
            title: {
                text: 'Time interval'
            },
            labels: {
                formatter: function () {
                    return millisecondsToStr(this.value);
                }
            }
        }

Highcharts Y轴时间，以毫秒为单位

1 个答案: