Verwenden Stunden Wert mit HighCharts

Question

Ich habe einige Probleme mit HighCharts, ich kann nicht herausfinden, wie Stunden zu verwenden. Momentan kann ich die Tagesstunden (00 bis 24) verwenden, aber es hört bei 24 auf und startet bei 0, weil HighCharts annimmt, dass ein Tag vorbei ist. Ich möchte nur eine Stunde Wert wie 1h30 oder 55h10 zum Beispiel haben. Hier ist mein Diagramm:

$('#chart2').highcharts({ 
     chart: { 
      type: 'column', 
      plotBackgroundColor: null, 
      plotBorderWidth: 0, 
      borderWidth: 2, 
      borderRadius: 7, 
      borderColor: '#D8D8D8', 
      width:dialogWidth/2, 
      height:dialogWidth/2+50 
     }, 
     title: { 
      text: 'Time Worked per Day' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     yAxis: { 
      type: 'datetime', //y-axis will be in milliseconds 
      dateTimeLabelFormats: { //force all formats to be hour:minute:second 
       second: '%H:%M', 
       minute: '%H:%M', 
       hour: '%H:%M', 
       day: '%d %H:%M', 
       week: '%H:%M', 
       month: '%H:%M', 
       year: '%H:%M' 
      }, 
      title: { 
       text: 'Hours' 
      } 
     }, 

     credits: { 
       enabled: false 
      }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        formatter: function() { 
         return Highcharts.dateFormat('%Hh%M',new Date(this.y)); 
        } 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name +' : </b>' + 
        Highcharts.dateFormat('%Hh%M',new Date(this.y)); 
      } 
     }, 
     series: [{ 
      name: 'Hours', 
      colorByPoint: true, 
      data: datas 
     }] 
    }); 

Hoffnung, die Sie helfen können.

Answer 1

Sie müssen keine Datetime verwenden, um dies herauszufinden. Da Sie die Anzahl der Stunden pro Tag wissen möchten, basierend auf einem Wert in Millisekunden aus Ihren JSON-Daten, müssen Sie diesen Wert als Zahl und nicht als Datum behandeln.

Hier ist, wie ich dieses Problem gelöst:

Zuerst änderte ich, wie Sie die Etiketten in Ihrer y-Achse beschrieben. Ich ließ den datetime Typ fallen und benutzte die formatter Funktion, um die Aufkleber als ganze Stunden zu zeigen. Ich habe auch eine tickInterval definiert, um die Etiketten eine Stunde auseinander zu zeigen.

yAxis: { 
    labels: { 
     formatter: function() { 
      // show the labels as whole hours (3600000 milliseconds = 1 hour) 
      return Highcharts.numberFormat(this.value/3600000,0); 
     } 
    }, 
    title: { 
     text: 'Hours' 
    }, 
    tickInterval: 3600000 // number of milliseconds in one hour 
}, 

Als nächstes aktualisierte ich den Code in Ihrem Tooltip. Wir nehmen Ihre y-Werte und machen sie ganze Stunden. Ich setze den zweiten Parameter in Highcharts.numberFormat auf "2", so dass Ihre Toolip-Werte mit zwei Dezimalstellen angezeigt werden (z. B. "2,50" für zweieinhalb Stunden).

tooltip: { 
    formatter: function() { 
     return '<b>' + this.series.name +' : </b>' + 
      Highcharts.numberFormat(this.y/3600000,2); 
    } 
}, 

Sie können eine Arbeits Geige sehen, die Beispieldaten basieren weg von Ihnen zur Verfügung gestellt, hier: http://jsfiddle.net/brightmatrix/kk7odqez/

Hier ist ein Screenshot I des Diagramms in dieser Geige nahm, das zeigt, wie sowohl die Etiketten und Tooltip nun angezeigt Vielen Dank für die zusätzliche Informationen, die Sie in Ihren Kommentaren versehen

:. Das hat mir wirklich geholfen, das herauszufinden und Ihnen, wie ich hoffe, eine nützliche Lösung zu bieten.