Hinzufügen Zeitstempel Format zu Liniendiagramm X-Achsen

Question

Ich bin Neuling zu d3.js, sowie zu c3.js. Ich möchte dynamische Zeitstempel in c3.js wie in this d3.js example gezeigt. Es sollte das Zeitformat entsprechend dem Zeitbereich ändern.

Ich folge c3js.org's time series example. Aber nicht in der Lage, dynamische Reichweite zu bekommen.

Der Code ist wie folgt.

aktualisieren 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 
     } 
    } 
} 
}); 

Dies könnte dumme Frage, aber ich bin Neuling auf diesem Gebiet.

Answer 1

Es gab ein paar Dinge, die ich tun musste, damit das funktionierte.

Zuerst und am wichtigsten, nicht wieder deklarieren d3 als ein Datum, weil Sie nicht in der Lage sein wird, eine der d3-Bibliothek zu verwenden! I umbenannt d1, d2, d3... zu date1, date2, date3...

Zweitens, es ist wie c3.js sieht erlaubt nur eine Teilmenge von Zeitformat Planern und %X nicht einer von ihnen ist, also habe ich geändert:

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

zu

Beachten Sie, dass ich auch parseDate zu format umbenannt habe, da es besser widerspiegelt, was passiert. Aber Sie müssen nicht, dies trotzdem zu verwenden, sehen wären meinen Update unter

Eine Möglichkeit, ein dynamisches x-Achsen-Zeitformat zu erhalten, indem die Differenz zwischen dem letzten und den ersten Termine Berechnung - In diesem Fall variieren das Format, wenn die Zeitspanne als einen Tag größer ist (86.400 Sekunden)

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

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

und Ändern der tick-Format:

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

aktualisieren

Eigentlich müssen Sie hier überhaupt nicht format=d3.time.format(...) verwenden, da c3.js alle Datumsformatierungen verarbeitet. So können Sie einfach tun dies (das Datum passieren in direkt im c3 ‚x‘ Spalte anstatt es Formatierung, weil es sowieso neu formatiert werden):

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 
      } 
     } 
    } 
}); 

Es tut uns nicht so klar früher machen!