带有“日期时间”轴的“列范围”图

Question

我正在建立一个“ columnrange”图，其中xAxis是一周中的一天，Y轴是睡眠时间的开始直到睡眠时间的结束，但是我无法弄清楚它的格式当我做new Date(time).getTime()时，Y轴上的时间会在图中绘制差异。

我试图实现的是一个带有[xAxisPosition，end，start]的数组；

数据：

const mockSleep = [
  {
    date: "2019-06-10",
    asleep: {
    startTime: "2019-06-09T18:00:00Z",
     endTime: "2019-06-10T023:07:07Z",
     hours: 8
     },
    inBed: {
      startTime: "2019-06-08T20:00:00Z",
      endTime: "2019-06-09T03:07:07Z",
      hours: 7
    }
  }

尝试格式化：

const sleep1 = obj => {
  return obj.map(({ date, inBed }) => {
    const { startTime, endTime } = inBed;

    const xAxisPosition = new Date(date).getTime();
    const start = new Date(startTime).getTime();
    const end = new Date(endTime).getTime();

    return [xAxisPosition, start, end];
  });
};

图形选项：

const options = {
  title: {
    text: "Sleep vs Activity"
  },

  yAxis: {
    opposite: true,
    type: "datetime",
    tickmarkPlacement: "on",
    tickInterval: 3600 * 1000,
    dateTimeLabelFormats: {
      second: "%H:%M:%S",
      minute: "%H:%M:%S",
      hour: "%H:%M:%S",
      day: "%H:%M:%S",
      week: "%H:%M:%S",
      month: "%H:%M:%S",
      year: "%H:%M:%S"
    },
    labels: {
      formatter: function() {
        return Highcharts.dateFormat("%H:%M %p", this.value);
      }
    }
  },

  xAxis: {
    type: "datetime",
    tickmarkPlacement: "on",
    units: [["day", [1]], ["week", [1]], ["month", [1, 3, 6]], ["year", 1]],
    dateTimeLabelFormats: {
      day: "%a"
    }
  },

  legend: {
    enabled: false
  },

  plotOptions: {
    series: {
      pointWidth: 30
    }
  },

  // tooltip: {
  //   enabled: false
  // },

  series: [
    {
      type: "columnrange",
      color: "red",
      data: sleep1(mockSleep)
    }
  ]
};

That is how should look