Highchart Heatmap - DateTime Ausrichtung der Y-Achse

Ich versuche, eine Heatmap mit Highcharts zu erstellen, mit der X- und Y-Achse von Datum und Uhrzeit.Highchart Heatmap - DateTime Ausrichtung der Y-Achse

Alles sieht gut aus außer der Ausrichtung der y-Achse.

Die "00:00" sollte an der Basis des Diagramms sein, aber es ist versetzt/zentriert auf die erste Box.

Ich habe mich umgesehen, kann aber nicht herausfinden, an welchen Einstellungen ich fummeln muss. Jede Hilfe wird geschätzt.

Bitte beachten Sie mein Beispiel für jsFiddle. Das Datenfeld enthält [EpochTicksForStartOfDay, TicksForTimeOfDay, Value]

https://jsfiddle.net/h2zb2tos/5/

UPDATE: I die Y-Achse und Linien Etikett möchte mit der Unterseite der heatmap Kästen auszurichten. Die ersten (niedrigsten) Boxen beginnen um 00:00 Uhr, die zweite um 01:00 Uhr, die dritte um 02:00 usw., also würde ich erwarten, dass die Linien sich aufreihen.

Html

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/heatmap.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="height: 800px; min-width: 600px; margin: 0 auto"></div>

JavaScript

$(function() { 

    var json = { 
    "Data": [ 
     [1453075200000, 0, 45.0000], 
     [1453075200000, 3600000, 46.0000], 
     [1453075200000, 7200000, 47.0000], 
     [1453075200000, 10800000, 48.0000], 
     [1453075200000, 14400000, 47.0000], 
     [1453075200000, 18000000, 46.0000], 
     [1453075200000, 21600000, 45.0000], 
     [1453075200000, 25200000, 46.0000], 
     [1453075200000, 28800000, 42.0000], 
     [1453075200000, 32400000, 43.0000], 
     [1453075200000, 36000000, 49.0000], 
     [1453075200000, 39600000, 42.0000], 
     [1453075200000, 43200000, 43.0000], 
     [1453075200000, 46800000, 46.0000], 
     [1453075200000, 50400000, 44.0000], 
     [1453075200000, 54000000, 44.0000], 
     [1453075200000, 57600000, 43.0000], 
     [1453075200000, 61200000, 41.0000], 
     [1453075200000, 64800000, 41.0000], 
     [1453075200000, 68400000, 40.0000], 
     [1453075200000, 72000000, 45.0000], 
     [1453075200000, 75600000, 43.0000], 
     [1453075200000, 79200000, 43.0000], 
     [1453075200000, 82800000, 45.0000], 
     [1453161600000, 0, 41.0000], 
     [1453161600000, 3600000, 42.0000], 
     [1453161600000, 7200000, 43.0000], 
     [1453161600000, 10800000, 44.0000], 
     [1453161600000, 14400000, 44.0000], 
     [1453161600000, 18000000, 43.0000], 
     [1453161600000, 21600000, 40.0000], 
     [1453161600000, 25200000, 39.0000], 
     [1453161600000, 28800000, 37.0000], 
     [1453161600000, 32400000, 36.0000], 
     [1453161600000, 36000000, 39.0000], 
     [1453161600000, 39600000, 35.0000], 
     [1453161600000, 43200000, 36.0000], 
     [1453161600000, 46800000, 37.0000], 
     [1453161600000, 50400000, 36.0000], 
     [1453161600000, 54000000, 36.0000], 
     [1453161600000, 57600000, 35.0000], 
     [1453161600000, 61200000, 35.0000], 
     [1453161600000, 64800000, 36.0000], 
     [1453161600000, 68400000, 35.0000], 
     [1453161600000, 72000000, 42.0000], 
     [1453161600000, 75600000, 42.0000], 
     [1453161600000, 79200000, 40.0000], 
     [1453161600000, 82800000, 36.0000], 
     [1453248000000, 0, 34.0000], 
     [1453248000000, 3600000, 34.0000], 
     [1453248000000, 7200000, 37.0000], 
     [1453248000000, 10800000, 37.0000], 
     [1453248000000, 14400000, 39.0000], 
     [1453248000000, 18000000, 38.0000], 
     [1453248000000, 21600000, 35.0000], 
     [1453248000000, 25200000, 36.0000], 
     [1453248000000, 28800000, 33.0000], 
     [1453248000000, 32400000, 33.0000], 
     [1453248000000, 36000000, 33.0000], 
     [1453248000000, 39600000, 34.0000], 
     [1453248000000, 43200000, 38.0000], 
     [1453248000000, 46800000, 36.0000], 
     [1453248000000, 50400000, 36.0000], 
     [1453248000000, 54000000, 36.0000], 
     [1453248000000, 57600000, 36.0000], 
     [1453248000000, 61200000, 36.0000], 
     [1453248000000, 64800000, 36.0000], 
     [1453248000000, 68400000, 37.0000], 
     [1453248000000, 72000000, 40.0000], 
     [1453248000000, 75600000, 41.0000], 
     [1453248000000, 79200000, 36.0000], 
     [1453248000000, 82800000, 48.0000], 
     [1453334400000, 0, 47.0000], 
     [1453334400000, 3600000, 45.0000], 
     [1453334400000, 7200000, 45.0000], 
     [1453334400000, 10800000, 45.0000], 
     [1453334400000, 14400000, 45.0000], 
     [1453334400000, 18000000, 43.0000], 
     [1453334400000, 21600000, 43.0000], 
     [1453334400000, 25200000, 41.0000], 
     [1453334400000, 28800000, 40.0000], 
     [1453334400000, 32400000, 49.0000], 
     [1453334400000, 36000000, 43.0000], 
     [1453334400000, 39600000, 40.0000], 
     [1453334400000, 43200000, 39.0000], 
     [1453334400000, 46800000, 39.0000], 
     [1453334400000, 50400000, 38.0000], 
     [1453334400000, 54000000, 38.0000], 
     [1453334400000, 57600000, 40.0000], 
     [1453334400000, 61200000, 40.0000], 
     [1453334400000, 64800000, 38.0000], 
     [1453334400000, 68400000, 38.0000], 
     [1453334400000, 72000000, 40.0000], 
     [1453334400000, 75600000, 42.0000], 
     [1453334400000, 79200000, 49.0000], 
     [1453334400000, 82800000, 52.0000], 
     [1453420800000, 0, 41.0000], 
     [1453420800000, 3600000, 40.0000], 
     [1453420800000, 7200000, 44.0000], 
     [1453420800000, 10800000, 46.0000], 
     [1453420800000, 14400000, 45.0000], 
     [1453420800000, 18000000, 46.0000], 
     [1453420800000, 21600000, 47.0000], 
     [1453420800000, 25200000, 47.0000], 
     [1453420800000, 28800000, 45.0000], 
     [1453420800000, 32400000, 48.0000], 
     [1453420800000, 36000000, 47.0000], 
     [1453420800000, 39600000, 46.0000], 
     [1453420800000, 43200000, 47.0000], 
     [1453420800000, 46800000, 58.0000], 
     [1453420800000, 50400000, 58.0000], 
     [1453420800000, 54000000, 58.0000], 
     [1453420800000, 57600000, 66.0000], 
     [1453420800000, 61200000, 60.0000], 
     [1453420800000, 64800000, 60.0000], 
     [1453420800000, 68400000, 54.0000], 
     [1453420800000, 72000000, 56.0000], 
     [1453420800000, 75600000, 55.0000], 
     [1453420800000, 79200000, 65.0000], 
     [1453420800000, 82800000, 63.0000], 
     [1453507200000, 0, 54.0000], 
     [1453507200000, 3600000, 61.0000], 
     [1453507200000, 7200000, 61.0000], 
     [1453507200000, 10800000, 61.0000], 
     [1453507200000, 14400000, 60.0000], 
     [1453507200000, 18000000, 60.0000], 
     [1453507200000, 21600000, 56.0000], 
     [1453507200000, 25200000, 57.0000], 
     [1453507200000, 28800000, 53.0000], 
     [1453507200000, 32400000, 54.0000], 
     [1453507200000, 36000000, 56.0000], 
     [1453507200000, 39600000, 56.0000], 
     [1453507200000, 43200000, 60.0000], 
     [1453507200000, 46800000, 63.0000], 
     [1453507200000, 50400000, 59.0000], 
     [1453507200000, 54000000, 58.0000], 
     [1453507200000, 57600000, 57.0000], 
     [1453507200000, 61200000, 59.0000], 
     [1453507200000, 64800000, 58.0000], 
     [1453507200000, 68400000, 58.0000], 
     [1453507200000, 72000000, 54.0000], 
     [1453507200000, 75600000, 54.0000], 
     [1453507200000, 79200000, 57.0000], 
     [1453507200000, 82800000, 53.0000], 
     [1453593600000, 0, 54.0000], 
     [1453593600000, 3600000, 54.0000], 
     [1453593600000, 7200000, 56.0000], 
     [1453593600000, 10800000, 57.0000], 
     [1453593600000, 14400000, 57.0000], 
     [1453593600000, 18000000, 55.0000], 
     [1453593600000, 21600000, 56.0000], 
     [1453593600000, 25200000, 57.0000], 
     [1453593600000, 28800000, 55.0000], 
     [1453593600000, 32400000, 55.0000], 
     [1453593600000, 36000000, 58.0000], 
     [1453593600000, 39600000, 61.0000], 
     [1453593600000, 43200000, 61.0000], 
     [1453593600000, 46800000, 61.0000], 
     [1453593600000, 50400000, 61.0000], 
     [1453593600000, 54000000, 59.0000], 
     [1453593600000, 57600000, 60.0000], 
     [1453593600000, 61200000, 62.0000], 
     [1453593600000, 64800000, 63.0000], 
     [1453593600000, 68400000, 67.0000], 
     [1453593600000, 72000000, 62.0000], 
     [1453593600000, 75600000, 63.0000], 
     [1453593600000, 79200000, 65.0000], 
     [1453593600000, 82800000, 65.0000] 
    ] 
    }; 

    $('#container').highcharts({ 
    chart: { 
     type: 'heatmap', 
     marginTop: 40, 
     marginBottom: 80, 
     plotBorderWidth: 1 
    }, 

    title: { 
     text: 'My Title' 
    }, 

    xAxis: { 
     type: 'datetime' 
    }, 

    yAxis: { 
     type: 'datetime', 
     labels: { 
     formatter: function() { 
      return Highcharts.dateFormat('%H:%M', this.value); 
     } 
     } 
    }, 

    colorAxis: { 
     min: 0, 
     stops: [ 
     [0, '#04006D'], 
     [0.33, '#119E00'], 
     [0.67, '#FFBF00'], 
     [1, '#F20011'] 
     ] 
    }, 

    legend: { 
     align: 'right', 
     layout: 'vertical', 
     margin: 0, 
     verticalAlign: 'top', 
     y: 25, 
     symbolHeight: 280 
    }, 

    tooltip: { 
     formatter: function() { 
     return '<b>' + this.point.value + '</b>'; 
     } 
    }, 

    series: [{ 
     colsize: 86400000, 
     rowsize: 3600000, 
     borderWidth: 1, 
     data: json.Data 
    }] 
    }); 
});

Quelle

2016-05-18 ETFairfax

Wenn Sie alle Datenpunkte Werte für halbe Zeilengröße erhöhen, dann sind alle Punkte auf Rasterlinien und ausgerichtet auf Ticks - https://jsfiddle.net/h2zb2tos/6/ Ist das, was Sie versuchen zu bekommen? –

Versuchen Sie, einen y Wert Ihrer yAxis Etiketten Zugabe wie folgt:

yAxis: { 
    type: 'datetime', 
    labels: { 
    formatter: function() { 
     return Highcharts.dateFormat('%H:%M', this.value); 
    }, 
    y: 20 
    } 
},

Thi s wird auf dem Etikett in der folgenden Änderung ergeben:

Hier eine modifizierte Geige für Ihre Referenz ist: https://jsfiddle.net/brightmatrix/h2zb2tos/4/

Bitte lassen Sie mich wissen, ob dies mit Ihrer Frage hilft!

Quelle

2016-05-18 11:18:20

Danke für die Antwort. Obwohl das meine Frage beantwortet, glaube ich, dass es das Problem nicht ganz löst. Ich habe die Geige aktualisiert, um zu zeigen, wie sich die Y-Achse verhält, wenn die Heatmap-Boxen dünner sind. https://jsfiddle.net/h2zb2tos/5/ und Sie sehen, dass die Achsenlinien nicht mit dem unteren Rand der Boxen übereinstimmen. Ich werde meine Frage aktualisieren, um dies hervorzuheben. Nochmals vielen Dank für die Hilfe bis jetzt. – ETFairfax

Ja, mit dieser Lösung müssten Sie diesen y-Wert entsprechend der Höhe Ihrer Zeilen anpassen. Obwohl dies zwar das Etikettproblem lösen kann, wird jedoch nicht die tatsächliche Position des Häkchens/der Gitterlinie korrigiert, was wirklich dieses Problem verursacht. – jlbriggs

Highchart Heatmap - DateTime Ausrichtung der Y-Achse

Antwort

Verwandte Themen