Dodaj format datownika do wykresu liniowego x-axes

Question

Jestem początkującym użytkownikiem d3.js, a także c3.js. Chcę dynamicznego znacznika czasu w c3.js, jak pokazano w this d3.js example. Powinien zmienić format czasu zgodnie z zakresem czasu.

Obserwuję numer c3js.org's time series example. Ale nie jest w stanie uzyskać dynamicznego zasięgu.

Kod jest następujący.

Aktualizacja 1

var date1=new Date(1397657484*1000); 
var date2=new Date(1397657514*1000); 
var date3=new Date(1397657554*1000); 
var date4=new Date(1397657594*1000); 
var date5=new Date(1397657641*1000); 
var date6=new Date(1398323901*1000); 

var seconds = (date6.getTime() - date1.getTime())/1000; 

var xaxisformat; 
    if (seconds < 86400) 
    { 
     xaxisformat = '%I:%M:%S'; 
    } 
    else { 
     xaxisformat = '%Y-%m-%d %I:%M'; 
    } 

var format=d3.time.format(xaxisformat); //I am converting after if loop since we are calculating seconds using javascript. 

date1=format(date1); //I think this formatting required to pass d3.time to c3js 
date2=format(date2); 
date3=format(date3); 
date4=format(date4); 
date5=format(date5); 
date6=format(date6); 

var chart = c3.generate({ 
data: { 
    x: 'x', 
    columns: [ 
     ['x',date1, date2, date3, date4, date5, date6], 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 130, 340, 200, 500, 250, 350] 
    ] 
}, 
axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      format: xaxisformat 
     } 
    } 
} 
}); 

To może być głupie pytanie, ale jestem nowicjuszem w tym obszarze.

Answer 1

Było kilka rzeczy, które musiałem zrobić, aby to zadziałało.

Po pierwsze i najważniejsze, nie należy ponownie deklarować d3 jako daty, ponieważ nie będzie można korzystać z żadnej z bibliotek D3! I przemianowany d1, d2, d3... do date1, date2, date3...

drugie, wygląda c3.js pozwala jedynie podzbiorem specyfikatorami format czasu i %X nie jest jednym z nich, więc zmieniłem:

var parseDate = d3.time.format("%X"); 

do

var format = d3.time.format("%Y-%m-%d %I:%M:%S.%L"); 

Zauważ, że zmieniłem również nazwę parseDate na format, ponieważ lepiej odzwierciedla to, co się dzieje. Ale i tak nie musisz tego używać, zobacz moją aktualizację poniżej:

Jednym ze sposobów uzyskania dynamicznego formatu czasu w osi x byłoby obliczenie różnicy między ostatnią a pierwszą datą - w tym przypadku zmienna format jeżeli okres czasu jest większa niż jeden dzień (86400 sekund)

var seconds = (date6.getTime() - date1.getTime())/1000; 

var xaxisformat; 
if (seconds < 86400) 
{ 
    xaxisformat = '%I:%M:%S'; 
} 
else { 
    xaxisformat = '%Y-%m-%d %I:%M' 
} 

i zmiany formatu kleszcza do:

x: { 
    type: 'timeseries', 
    tick: { 
     format: xaxisformat 
    } 

aktualizacji

W tym przypadku nie musisz używać tutaj format=d3.time.format(...), ponieważ c3.js obsługuje wszystkie formatowanie daty. Więc może po prostu to zrobić (przesuń datę bezpośrednio w C3 „x” kolumny zamiast formatowania go, ponieważ zostanie ponownie sformatowany tak):

var date1=new Date(1397657484*1000); 
... 
var date5=new Date(1397657641*1000); 
var date6=new Date(1397657741*1000); 

var seconds = (date6.getTime() - date1.getTime())/1000; 
var xaxisformat; 
if (seconds < 86400) 
{ 
    xaxisformat = '%I:%M:%S'; 
} 
else { 
    xaxisformat = '%Y-%m-%d %I:%M' 
} 

var chart = c3.generate({ 
    data: { 
     x: 'x', 
     columns: [ 
      ['x',date1, date2, date3, date4, date5, date6], 
      ['data1', 30, 200, 100, 400, 150, 250], 
      ['data2', 130, 340, 200, 500, 250, 350] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: xaxisformat 
      } 
     } 
    } 
}); 

Przepraszamy za nie wynika to wyraźnie wcześniej!