X-Achse ist nicht ordnungsgemäß in c3.js, wenn es Intervalldaten in DST-Zeit ist

Question

Ich versuche, ein Diagramm mit C3.js-Bibliothek mit x-Achse in Intervallzeit zu plotten.

Wir formulieren diese Intervalle entsprechend der Auswahl des Datumsbereichs. Wenn wir also die Daten 2016-03-13 00:00 bis 2016-03-13 04:00 wählen, fügen wir dem Startdatum 15 Minuten hinzu bleibt kleiner oder gleich

zum Endtermin

der Datenpunkt I ist nehme wie folgt:

[ „x“, „2016.03.13 00:00“, „2016.03.13 00.15 "," 2016-03-13 00:30 "," 2016-03-13 00:45 "," 2016-03-13 01:00 "," 2016-03-13 01:15 "," 2016-03 -13 01:30 "," 2016-03-13 01:45 "," 2016-03-13 02:00 "," 2016-03-13 02:15 "," 2016-03-13 02:30 " , "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03- 13 03:45 "," 2016-03-13 04:00 "]

Diese Punkte funktionieren Gut, wenn in der Zeitzone keine Sommerzeit auftritt. Aber wenn DST anwendbar ist, fehlt der Punkt zwischen 2 Uhr morgens und 3 Uhr morgens in der Graphik, deshalb ist die Skala 23 Stunden. Wir brauchen den ganzen Punkt, um im Diagramm zu zeichnen, egal wo die DST anwendbar ist oder nicht. Der folgende Code, den wir verwenden, aber es funktioniert nicht

var chart = c3.generate({ 
    data: { 
     x: 'x', 
     xFormat: '%Y-%m-%d %H:%M', // 'xFormat' can be used as custom format of 'x' 
     columns: [ 
      ["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"],//   ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'], 
      ['data1', 30, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250.30, 200, 100, 400, 150] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 

      fit: true, 
      tick: { 
       format: '%Y-%m-%d %H:%M:%S' 
      } 
     } 
    } 
}); 

Answer 1

Versuchen Datum Strings mit der Zeitzone mit Offset.

var dateFormatter=d3.time.format("%Y-%m-%d %H:%M%Z"); 
columns[0].forEach(function(d,idx,theArray){ 
    if(d!='x'){ 
     theArray[idx] = dateFormatter(new Date(d)); 
    } 
}); 

Answer 2

Es gibt ein paar Einstellungen, die zwischen lokaler und UTC-Zeit wechseln, eine für die Daten und einem für die Achse, obwohl die Daten einer noch nicht offiziell ausgesetzt ist und über c3 interne Eigenschaft getan wird

c3.chart.internal.fn.additionalConfig.data_xLocaltime = false; 

var chart = c3.generate({ 
    data: { 
     x: 'x', 
     xFormat: '%Y-%m-%d %H:%M', // 'xFormat' can be used as custom format of 'x' 
     columns: [ 
      ["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"], 
      /*["x", "2016-03-27 00:00", "2016-03-27 00:15", "2016-03-27 00:30", "2016-03-27 00:45", "2016-03-27 01:00", "2016-03-27 01:15", "2016-03-27 01:30", "2016-03-27 01:45", "2016-03-27 02:00", "2016-03-27 02:15", "2016-03-27 02:30", "2016-03-27 02:45", "2016-03-27 03:00", "2016-03-27 03:15", "2016-03-27 03:30", "2016-03-27 03:45", "2016-03-27 04:00"],*/ 
      ['data1', 30, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250.30, 200, 100, 400, 150] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 

      fit: true, 
      tick: { 
       format: '%Y-%m-%d %H:%M:%S' 
      }, 
      localtime: false, 
     } 
    } 
}); 

(die 2016.03.27 Daten habe ich in Großbritannien locale zu testen, wie das ist, wenn das Tageslicht Stundenwechsel hier geschieht)