Highcharts在x轴上显示24小时

Question

我想显示穿过Highcharts图表的24小时工作日，x轴为1小时，y轴为7天。

如何让图表从午夜开始并持续24小时？

如下所示，该图表目前从上午8:00开始，一直持续到下午3:00。相反，我们希望它从凌晨12:00开始，到晚上11:59结束。

$('#graph').highcharts({
  exporting: { enabled: false },
  chart: {
    type: 'columnrange',
    inverted: true
  },
  title: {
    text:''
  },
  yAxis: {
    type: 'datetime',
    tickAmount: 24,
    tickInterval: 3600 * 1000,
    minTickInterval: 3600 * 1000,
    lineWidth: 1,
    dateTimeLabelFormats: {
        day: '%H:%M'
    },
    title: {
      enabled: false
    }
  },
  xAxis: {
    categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      pointWidth: 10,
    }
  },
  series: [{
    data: [
    {
      x: 0,
      low: Date.UTC(2010, 1, 1, 9, 0, 0),
      high: Date.UTC(2010, 1, 1, 12, 0, 0),
      color: 'blue'
    }, {
      x: 0,
      low: Date.UTC(2010, 1, 1, 12, 30, 0),
      high: Date.UTC(2010, 1, 1, 14, 0, 0),
      color: 'blue'
    },

    {
      x: 1,
      low: Date.UTC(2010, 1, 2, 9, 0, 0),
      high: Date.UTC(2010, 1, 2, 12, 0, 0),
      color: 'blue'
    },
    {
      x: 2,
      low: Date.UTC(2010, 1, 3, 9, 0, 0),
      high: Date.UTC(2010, 1, 3, 12, 0, 0),
      color: 'blue'
    },
    {
      x: 3,
      low: Date.UTC(2010, 1, 4, 9, 0, 0),
      high: Date.UTC(2010, 1, 4, 12, 0, 0),
      color: 'blue'
    },
    {
      x: 4,
      low: Date.UTC(2010, 1, 5, 9, 0, 0),
      high: Date.UTC(2010, 1, 5, 12, 0, 0),
      color: 'blue'
    },
    {
      x: 5,
      low: Date.UTC(2010, 1, 6, 9, 0, 0),
      high: Date.UTC(2010, 1, 6, 12, 0, 0),
      color: 'blue'
    },
    {
      x: 6,
      low: Date.UTC(2010, 1, 7, 9, 0, 0),
      high: Date.UTC(2010, 1, 7, 12, 0, 0),
      color: 'blue'
    },

    ]
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="graph"></div>

---------------- EDIT ---------------- 我更新了数据以复制我们真正想要的东西。输出正在工作但“已损坏”。我们希望图表看起来像图片。

Answer 1

您可以使用yAxis.min和yAxis.max设置轴的最小值和最大值。您可以使用tickPositioner在轴上设置标签的位置： http://api.highcharts.com/highcharts/yAxis.tickPositioner

yAxis: {
  min: Date.UTC(2010, 0, 1, 0, 0, 0),
  max: Date.UTC(2010, 0, 2, 0, 0, 0),
  type: 'datetime',
  tickPositioner: function() {
    var info = this.tickPositions.info;
    var positions = [];
    for (i = Date.UTC(2010, 0, 1, 0, 0, 0); i <= Date.UTC(2010, 0, 2, 0, 0, 0); i += 3600 * 1000) {
      positions.push(i);
    }
    positions.info = info;
    return positions;
  },
  lineWidth: 1,
  dateTimeLabelFormats: {
    day: '%H:%M'
  },
  title: {
    enabled: false
  }
},

在这里你可以看到一个如何工作的例子： http://jsfiddle.net/1yccghgy/1/