Flot-Diagramm vergleicht neuen Punkt am Ende, wenn Daten

Question

geändert ich die folgende flicht Chart-Direktive:

/**========================================================= 
* Module: flot.js 
* Initializes the Flot chart plugin and handles data refresh 
=========================================================*/ 

(function() { 
    'use strict'; 

    angular 
     .module('app.charts') 
     .directive('flot', flot); 

    flot.$inject = ['$http', '$timeout']; 
    function flot ($http, $timeout) { 

     var directive = { 
      restrict: 'EA', 
      template: '<div></div>', 
      scope: { 
      dataset: '=?', 
      options: '=', 
      series: '=', 
      callback: '=', 
      src: '=' 
      }, 
      link: link 
     }; 
     return directive; 

     function link(scope, element, attrs) { 
      var height, plot, plotArea, width; 
      var heightDefault = 220; 

      plot = null; 

      width = attrs.width || '100%'; 
      height = attrs.height || heightDefault; 

      plotArea = $(element.children()[0]); 
      plotArea.css({ 
      width: width, 
      height: height 
      }); 

      function init() { 
      var plotObj; 
      if(!scope.dataset || !scope.options) return; 
      plotObj = $.plot(plotArea, scope.dataset, scope.options); 
      scope.$emit('plotReady', plotObj); 
      if (scope.callback) { 
       scope.callback(plotObj, scope); 
      } 

      return plotObj; 
      } 

      function onDatasetChanged(dataset) { 
      if (plot) { 
       plot.setData(dataset); 
       plot.setupGrid(); 
       return plot.draw(); 
      } else { 
       plot = init(); 
       onSerieToggled(scope.series); 
       return plot; 
      } 
      } 
      scope.$watchCollection('dataset', onDatasetChanged, true); 

      function onSerieToggled (series) { 
      if(!plot || !series) return; 
      var someData = plot.getData(); 
      for(var sName in series) { 
       angular.forEach(series[sName], toggleFor(sName)); 
      } 

      plot.setData(someData); 
      plot.draw(); 

      function toggleFor(sName) { 
       return function (s, i){ 
       if(someData[i] && someData[i][sName]) 
        someData[i][sName].show = s; 
       }; 
      } 
      } 
      scope.$watch('series', onSerieToggled, true); 

      function onSrcChanged(src) { 

      if(src) { 

       $http.get(src) 
       .success(function (data) { 

        $timeout(function(){ 
        scope.dataset = data; 
        }); 

       }).error(function(){ 
       $.error('Flot chart: Bad request.'); 
       }); 

      } 
      } 
      scope.$watch('src', onSrcChanged); 

     } 
    } 


})(); 

Wenn die Daten festgelegt ist, es funktioniert gut. Aber falls die Daten geändert werden und es einen neuen Punkt gibt, der am Anfang stehen soll, wird er am Ende geplottet. Dadurch werden der Endpunkt und der Startpunkt verbunden.

z.
Frühere Daten: B-C-D-E-F
Knopf klicken
Neue Daten: A-B-C-D-E-F
Chart: B-C-D-E-F-A (auch, B und A verbunden bekommen)

Wenn die Seite aktualisiert wird, wird das alles richtig aufgetragen. Die Daten und Optionen sind also korrekt. Ich weiß nicht, wie ich es zurücksetzen soll, da der gesamte Code, den ich sah, aus Leinwand, Platzhalter und $.plot() besteht.

Hier ist meine Daten:
Alt:

[{"label":"temp","data":[["2016-04-01T09:19:31.750Z","25"],["2016-04-01T09:19:31.956Z","25"],["2016-04-01T09:19:32.150Z","25"],["2016-04-01T09:19:32.326Z","25"],["2016-04-01T09:19:32.664Z","25"],["2016-04-01T09:19:32.844Z","25"],["2016-04-01T09:19:33.034Z","25"],["2016-04-01T09:19:33.225Z","25"],["2016-04-01T09:19:33.414Z","25"],["2016-04-01T09:19:33.571Z","25"],["2016-04-01T09:19:33.748Z","25"]]}] 

Neu:

[{"label":"temp","data":[["2016-03-28T09:19:31.062Z","20"],["2016-04-01T09:19:31.750Z","25"],["2016-04-01T09:19:31.956Z","25"],["2016-04-01T09:19:32.150Z","25"],["2016-04-01T09:19:32.326Z","25"],["2016-04-01T09:19:32.664Z","25"],["2016-04-01T09:19:32.844Z","25"],["2016-04-01T09:19:33.034Z","25"],["2016-04-01T09:19:33.225Z","25"],["2016-04-01T09:19:33.414Z","25"],["2016-04-01T09:19:33.571Z","25"],["2016-04-01T09:19:33.748Z","25"]]}] 

Answer 1

Ich bin mit einem Problem zu umgehen, Added ein reset Schlüssel in den Anwendungsbereich der Richtlinie. Ich ändere es auf wahr, wenn die Taste gedrückt wird, und dann wird die init() erneut aufgerufen, wenn die Daten geändert werden.

Wenn es noch bessere Option gibt, bitte vorschlagen.

var directive = { 
    restrict: 'EA', 
    template: '<div></div>', 
    scope: { 
     dataset: '=?', 
     reset: '=', 
     options: '=', 
     series: '=', 
     callback: '=', 
     src: '=' 
    }, 
    link: link 
}; 

... 

function onDatasetChanged(dataset) 
{ 
    if (plot && !scope.reset) 
    { 
     plot.setData(dataset); 
     plot.setupGrid(); 
     return plot.draw(); 
    } 
    else 
    { 
     scope.reset = false; 
     plot = init(); 
     onSerieToggled(scope.series); 
     return plot; 
    } 
}