如何在列的y轴上设置24h范围highchart

背景信息：我正在跟踪每天发生一次的游戏更新，因此我在数据库中添加了一个以毫秒为单位的unix时间戳，工作正常。如何在列的y轴上设置24h范围highchart

我不知道的是如何将高图的y轴设置为'静态'24小时范围。我想是这样的：

（不看我的油漆技能）

我已经得到了x轴工作，但我不知道如何设置y轴正确，到24小时的静态范围。

我目前的进度在这里：

$('#chart').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    xAxis: { 
     type: 'datetime', 
     tickInterval: 24 * 3600 * 1000, 
    }, 
    yAxis: { 
     labels: { 
      formatter: function() { 
       return moment.utc(this.value).format('HH:mm:ss'); 
      } 
     }, 
     title: { 
      text: 'static 24h range on this axis' 
     }, 
    }, 
    series: [{ 
     name: 'time', 
     data: [[1447459200000, 1447498374000],   [1447545600000, 1447559210000]] 
    }] 
});

http://jsfiddle.net/yrqzcys2/8/

有没有办法实现这个目标，我周围中搜索，但没有找到解决这种情况。

任何帮助表示赞赏！

编辑：

所以在该系列中的数据是一个Unix时间戳，其转换为datetime，它将包含日期和时间。基本上我想要在y轴上的日期和在y轴上的时间。因此y轴上的24小时范围。

来源

2016-05-13 Denny

嗯，这是棘手，因为你要为你的Y值将提供不同的日期，这样就不会在一个单一的时间尺度意义。有两个选项可以使它变得有意义：不要提供日期/时间作为y值，提供几秒钟或几分钟（考虑一天中的时间 - 而不是一个完整的时代邮票），然后进行数学运算标签/工具提示格式器。 2）为每个y值提供相同的日期，只是时间部分不同 – jlbriggs

像这样回答：http://stackoverflow.com/questions/31158237/highcharts-aligning-datetime-series-for-shared-tooltip/31187008 ＃31187008 – jlbriggs

@jlbriggs你的链接甚至不涉及我的问题 – Denny

我通过计算秒数来计算出jlbriggs的帮助。这是通过从确切的unix时间戳中减去00:00的日期的unix时间戳完成的。

http://jsfiddle.net/yrqzcys2/16/

$(function() { 
    var data = []; 
/* Pretend that this part of code is in a loop and add an array to the main data array */ 
    //       from database 
    var datetime = moment.utc("2015-11-14 10:52:54"); 
    var day = moment.utc(datetime.format('YYYY-MM-DD')).valueOf(); 
    var exact = datetime.valueOf(); 
    var temp = []; 
    temp.push(day); 
    temp.push(exact - day); 
    data.push(temp); 
    /* End of loop */ 

    $('#chart').highcharts({ 


    chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickInterval: 24 * 3600 * 1000, 
     }, 
     yAxis: { 
      labels: { 
       formatter: function() { 
        return moment.utc(this.value).format('HH:mm:ss'); 
       } 
      }, 
      title: { 
       text: 'Now shows a \'static\' range' 
      }, 
      tickInterval: 3600 * 1000, 
     }, 
     tooltip: { 
      useHTML: true, 
      formatter: function() { 
       return moment.utc(this.y, 'x').format('HH:mm:ss z'); 
      } 
     }, 
     series: [{ 
      name: 'time', 
      data: data 
     }] 
    }); 
});

来源

2016-05-13 21:13:27 Denny

如何在列的y轴上设置24h范围highchart

回答

相关问题