如何在列的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

回答

相關問題