Hinzufügen einer einfachen Funktion zu einem Highcharts.js Zeitreihen Plot

Question

Ich fand diese Live-Aktualisierung Zeitreihe Diagramm und ich versuche, eine einfache Funktion hinzuzufügen. Ich möchte eine vertikale Linie hinzufügen, wo der tiefste Punkt auf dem Diagramm ist. Ich habe Code gefunden, um eine vertikale Linie hinzuzufügen, aber ich bin mir nicht sicher, wie ich den niedrigsten Punkt finden und das Diagramm aktualisieren soll. schau dir das an Fiddle, ich fühle mich wie ich bin ziemlich nah.

Highcharts.js Code vertikale Linie eine wirklich würdige Frage

xAxis: { 
     type: 'datetime', 
     tickPixelInterval: 150, 
     plotLines: [{ // this code adds a vertical line 
      color: '#FF0000', // Red 
      width: 2, 
      value: (new Date).getTime() // Position, you'll have to translate this to the values on your x axis 
     }] 
    }, 

Answer 1

Dies war hinzuzufügen, dass ich die Erforschung genossen. Ich habe etwas untersucht und einen Weg gefunden, um einen Handlungsstrang hinzuzufügen, wann immer der niedrigste Wert in der Zeitreihe generiert wird.

Zuerst setze ich eine Variable namens lowestValue außerhalb Ihrer Diagrammoptionen. Diese Variable wird verwendet und überprüft, wenn neue Punkte zur Serie hinzugefügt werden.

// make the initial value higher that the possible maximum y value 
var lowestValue = 10; 

Als nächstes fügte ich einige Codes zu Ihrem Diagramm Ereignisse, die, ob der neue y Wert überprüft, die niedriger ist als der aktuelle Wert von lowestValue generiert werden ist. Wenn dies der Fall ist, fügen wir eine neue Handlungslinie hinzu, die an diesem Punkt angebracht ist.

Ich habe auch Code hinzugefügt, um die letzte erstellte Handlungslinie zu entfernen (falls es eine gab), um klar zu zeigen, welcher Punkt den niedrigsten Wert bisher hat. Der Schlüssel dazu ist, der Handlungslinie einen konsistenten id hinzuzufügen. Auf diese Weise weiß die removePlotLine() Funktion, welche zu entfernen ist.

events: { 
    load: function() { 

     // set up the updating of the chart each second 
     var series = this.series[0]; 
     setInterval(function() { 
      var x = (new Date()).getTime(), // current time 
       y = Math.random(); 
      series.addPoint([x, y], true, true); 

      // if the most recent point is lower than 
      // the last recorded lowest value, add a 
      // new plotline 
      if (y < lowestValue) { 
       lowestValue = y; 
       var plotOption = { 
        color: '#FF0000', 
        width: 2, 
        value: x, 
        zIndex: 0, 
        id: 'thisPlotLine' 
       }; 
      // remove the previous plot line 
      series.xAxis.removePlotLine('thisPlotLine'); 
      // add the new plot line 
      series.xAxis.addPlotLine(plotOption); 
      } 

     }, 1000); 
    } 
} 

ich modifizierte Ihre Geige, diese Veränderungen zu zeigen: http://jsfiddle.net/brightmatrix/pnL6xtLb/2/

Nun, werden Sie feststellen, dass im Laufe der Zeit Ihre Handlungsstränge können seltener erscheinen als der Wert von lowestValue auf 0 näher kommt Wenn Sie würden lieber den niedrigsten Wert unter den Punkten zeigen, die zu jeder Zeit im Diagramm zu sehen sind., ich würde vorschlagen, einen Zähler hinzuzufügen, der die Anzahl der Punkte verfolgt, die seit dem Hinzufügen der letzten Handlungslinie hinzugefügt wurden. Wenn dann der niedrigste Punkt (mit seiner Plot-Linie) aus dem Diagramm entfernt wird, setzen Sie lowestValue zurück auf 10, so dass der niedrigste sichtbare Punkt derjenige ist, der die Plot-Linie erhält.

Ich hoffe, dass diese Information für Sie hilfreich ist!