在 x 轴上显示 24 小时的 Highcharts

Posted 2023-03-14

【中文标题】在 x 轴上显示 24 小时的 Highcharts

【英文标题】：Highcharts 24 hours displayed on x axis

【发布时间】：2016-10-04 18:07:20

【问题描述】：

我想在 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>

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

【参考方案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/

【讨论】：

谢谢！这很好用。我们看到了另一个问题/答案的答案，该答案建议像您一样使用最小值和最大值。对于对最小值和最大值进行硬编码，您能想到哪些负面因素？

我意识到我的数据无效，因此将日期硬编码到最小值和最大值会导致图表无法绘制我的数据。

是的，我认为有时在 xAxis 和 yAxis 中使用 setExtremes 可能会更好，因为在加载图表之前您可能不知道要在图表中显示的范围。但在你的情况下应该没问题。我的例子对你有用吗？如果是，您能否将我的答案标记为正确？

关于 this.tickPositions.info 的任何想法；我在 Highcharts 中找不到这个 info 属性。

它不是记录在案的财产。但是，您可以直接在 Highcharts 代码中阅读：“// 记录所选单元的信息 - 用于动态标签格式化程序”