Comment gravez-vous des valeurs de 24 heures (par exemple, 23:01:35), en valeurs y, dans rickshaw?

Question

J'ai des données qui énumère les heures de lever et de coucher du soleil pour une date donnée. Je voudrais les tracer sur deux lignes différentes. Exemple de données pendant 7 Août, 2015, on est:

ligne Sunrise: { "x": 1438967378, "y": "05:19:00"}

ligne Coucher du soleil: { "x": 1438967378, "y": "20:33:00"}

Je sais comment représenter des datetimes dans l'axe des x. Cependant, il n'est pas clair comment vous feriez des heures de la journée (dans un style d'horloge militaire 22:01:34) pour vos valeurs y.

Voici le code que je travaille avec:

$(document).ready(function() { 
     $('[data-toggle="tooltip"]').tooltip(); 
     var sunrise_data = {{ sunrise_report }}; // {{ variable }} data passed in via Django view 
     var sunset_data = {{ sunset_report }}; 
     var daylight_data = {{ daylight_report }}; 

     sunrise_data.sort(function (a, b) { 
      return parseFloat(a.x) - parseFloat(b.x); 
     }); 
     sunset_data.sort(function (a, b) { 
      return parseFloat(a.x) - parseFloat(b.x); 
     }); 
     daylight_data.sort(function (a, b) { 
      return parseFloat(a.x) - parseFloat(b.x); 
     }); 

     var seriesData = [sunrise_data, sunset_data, daylight_data]; 

     var graph = new Rickshaw.Graph({ 
      element: document.getElementById("sun_chart"), 
      renderer: 'multi', 
      width: $("div#sun_chart").width(), 
      height: 180, 
      max: 120, 
      min: -10, 
      interpolation: "linear", 
      dotSize: 4, 
      series: [{ 
       name: 'sunrise', 
       data: seriesData.shift(), 
       color: 'rgba(255, 0, 0, 0.4)', 
       renderer: 'line' 
      }, { 
       name: 'sunset', 
       data: seriesData.shift(), 
       color: 'rgba(127, 0, 0, 0.3)', 
       renderer: 'line' 
      }, { 
       name: 'daylight', 
       data: seriesData.shift(), 
       renderer: 'line', 
       color: 'rgba(0, 0, 127, 0.25)' 
      } 
      ] 
     }); 
     var timeUnit = { 
       'name': '12 hour', 
       'seconds': 3600 * 12, 
       'formatter': function(d) 
       { 
        return moment(d).format('h:mm a'); 
       } 
      }; 

      var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph, timeUnit: timeUnit }); 
      //var y_axis = new Rickshaw.Graph.Axis.Time({ graph: graph, timeUnit: timeUnit }); 

     graph.render(); 

     var detail = new Rickshaw.Graph.HoverDetail({ 
      graph: graph 
     }); 
    }); 

Answer 1

Sur l'axe Y vous aurez l'horodatage du jour, où les valeurs de tiques vont être entier. Donc, l'axe Y ressemblera à (0, 1, 2, ..., 24).

Donc 16:30 va être de 16,5. Pour ce faire, vous pouvez voir how to convert time to decimal number.

Sur le X Axis vous aurez toute l'année à partir du 1er Janvier au 31 Décembre

Votre graphique ressemblera à ceci:

Certainement vérifier https://ptaff.ca/soleil/?lang=en_CA

Il vous aidera à vérifier si vos graphiques sont corrects.