在 x 轴上显示 24 小时的 Highcharts

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>

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

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/