2016-05-13 13 views
0

背景情報:1日に1回のように起こるゲームの更新を追跡しているので、データベースにミリ秒単位のUNIXタイムスタンプを追加します。正常に動作します。列のY軸に24時間の範囲を設定する方法ハイチャート

ハイチャートのy軸を「静的な」24時間範囲にする方法がわかりません。私が欲しいのはこのようなものです:

don't mind my paint skills

(私の塗料のスキルを見てはいけない)

私が働いて、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/

は、これを達成する方法はあります、私は周りに検索した。このような状況の解決策を見つけることができませんでした。

ご協力いただきましてありがとうございます。

EDIT:だから、一連のデータは日時に変換し、UNIXタイムスタンプである

、それは日付時間が含まれています。基本的には、の日付は、x軸はの時刻です。したがって、y軸上の24時間の範囲。

+0

それは、単一の時間スケールでの意味をすることはありませんので、あなたが、あなたのY値として異なる日付を与えることになるだろうので、まあ、それは難しいです。これを意味する2つのオプションがあります:y値として日付/時間を指定しないで、秒数または分を指定しないでください(時間を考慮して、エポックの完全なスタンプではありません)。ラベル/ツールチップのフォーマッタ。 2)それぞれのy値に同じ日付を供給してください。ちょうど時間部分が異なります – jlbriggs

+0

この回答のように:http://stackoverflow.com/questions/31158237/highcharts-aligning-datetime-series-for-shared-tooltip/31187008 #31187008 – jlbriggs

+1

@jlbriggsあなたのリンクは私の質問にも関係しません – Denny

答えて

1

秒数を計算して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 
     }] 
    }); 
}); 
関連する問題