2016-06-10 14 views
1

Hallo, ich weiß, dass ich durch die Definition ein Datum Zeit auf dem xAchse wie soVerfügt HighCharts über eine Option zum dynamischen Hinzufügen von plotLines zu xAxis über datetime?

xAxis: { 
      plotLines: [{ 
      color: '#dadada', 
      width: 1, 
      value: Date.UTC(2016, 2, 28) 
      }] 

Ich mag dynamisch einen Handlungsstrang hinzufügen kann, um einen Handlungsstrang zu jedem Datetime Tag hinzufügen, um neue Daten aus der Datenbank hinzugefügt werden, ich bin mit zu der Serie.

http://jsfiddle.net/5ecgkcmf/

Ich will, was in der Geige erreichen, sondern dynamisch, ohne manuell in allen Werten Hinzufügen für Vergangenheit Rechnung zu tragen und zukünftige Daten

Hat highcharts eine Funktion haben dies zum Nachweis oder muss ich zu eine Art komplexe Schleife schreiben und die plotLines hineinschieben?

Jede Anleitung und Lösung wird geschätzt.

+0

Wie werden Sie neue Daten hinzufügen In diesem Verfahren Sie, wenn Sie überquert haben, um zu sehen überprüfen könnten? in einen neuen Tag und dann xAxis.addPlotLine() (http://api.highcharts.com/highcharts#Axis.addPlotLine). – wergeld

+0

Auf dem Live-Server werden die neuen Daten mindestens täglich aus der Datenbank geschoben werden wir sind mit so minimal wird es einen neuen Datetime-Punkt auf der x-Achse jeden Tag geben – gwar9

+0

Okay, also dann überprüfen Sie, welche Daten hinzugefügt werden, die innerhalb des Datums ist und fügen Sie die PlotLine über xAxis.addPlotLine(). Wenn Sie wissen, t Die letzte Datetime hinzugefügt, dann können Sie den xAxis-Wert berechnen. – wergeld

Antwort

4

Wenn Sie xAxis Tick-Intervalle auf einen Tag festgelegt haben, können Sie einfach die xAxis machen. gridlines sichtbar (sie sind auf gridLineWidth: 0 Voreingestellt: $ (function() {

$('#container').highcharts({ 
    xAxis: { 
     gridLineWidth: 2, 
     tickInterval: 24 * 3600 * 1000, 
     // one day 
     type: 'datetime' 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 24 * 3600 * 1000 
    }] 
}); 

});

Verwandte Themen