Flot js和Angular Issue

Question

我正在使用flotcharts繪製儀表盤上的某些點，並且遇到了一些麻煩。

首先，儀表板是有角度的，所以我設置了一個指令來初始化flot，它似乎正在工作。該圖表加載並繪製可用於其的第一組數據。當我嘗試更新用於生成圖形的數據時，就會出現問題。

當我這樣做時，數據更新，但只顯示前3個點，它不顯示結果中的完整數據集 - 僅顯示前3個圖表值。檢索到的JSON結果集的長度可能有所不同（返回的數據基於其他地方設置的日期值，並由updateStats函數請求）。我需要做的就是動態地繪製數據集中的所有數據，而不僅僅是數據集中的前幾行。

林不知道爲什麼它這樣做，放棄了我的頭撞在桌子上：D。任何幫助將非常感謝。

這裏是我的代碼（請無視console.logs等等 - 我一直在嘗試各種方式來調試此）：

該指令

.directive('flotChart', function() { 
return { 
    restrict: 'AE', 
    scope: { 
    data: '=flotData', 
    options: '=flotOptions', 
    plothover: '&plotHover', 
    plotclick: '&plotClick' 
    }, 
    link: function (scope, element, attr) { 
    var plot = $.plot($(element), scope.data, scope.options); 

    $(element).bind('plothover', function (event, position, item) { 
     scope.plothover({ 
     event: event, 
     position: position, 
     item: item 
     }); 
    }); 

    $(element).bind('plotclick', function (event, position, item) { 
     scope.plotclick({ 
     event: event, 
     position: position, 
     item: item 
     }); 
    }); 

    scope.$watch('data', function (newVal, oldVal) { 
     console.log("DATA WATCH"); 
     plot.setData(newVal); 
     plot.draw(); 
    }); 

    scope.$watch('options', function (newVal, oldVal) { 
     plot = $.plot($(element), scope.data, newVal); 
    }, true); 
    } 
} 

}）

控制器

.controller('DashboardController', ['$scope','$http', function ($scope,$http) { 

//刪除了與該對話不相關的一段代碼通貨膨脹

$scope.plotStatsData = [{data:[[1,500],[2,250],[3,150]], label:'TEST'}]; 

$scope.init = function() { 
    $scope.updateStats(); 
} 

    $scope.updateStats = function() { 
    $http.post("/admin/dashboard/loaddata",{start_date: $scope.drp_start, end_date: $scope.drp_end}).success(function(response){ 
     $scope.totals = response.summary; 
     //console.log(response.dataset); 
     $scope.plotPoints(response.dataset); 
    }); 
}; 

$scope.plotPoints = function(data) { 
    var layer1 = {data:[],label:'Users'}; 

    var count = 1; 

    if (confirm("Clear it?")) 
    $scope.plotStatsData = []; 

    for (var i=1; i < data.length; i++) 
     layer1.data.push([i,parseInt(data[i-1].users)]); 

    console.log(layer1); 

    $scope.plotStatsData.push(layer1); 

} 

$scope.plotStatsOptions = { 
    series: { 
     lines: { 
      show: true, 
      lineWidth: 1.5, 
      fill: 0.1 
     }, 
     points: { 
      show: true 
     }, 
     shadowSize: 0 
    }, 
    grid: { 
     labelMargin: 10, 
     hoverable: true, 
     clickable: true, 
     borderWidth: 0 
    }, 
    tooltip: true, 
    tooltipOpts: { 
     defaultTheme: false, 
     content: "View Count: %y" 
    }, 
    colors: ["#b3bcc7"], 
    xaxis: { 
     tickColor: 'transparent', 

     tickDecimals: 0, 
     autoscaleMargin: 0, 
     font: { 
      color: 'rgba(0,0,0,0.4)', 
      size: 11 
     } 
    }, 
    yaxis: { 
     ticks: 4, 
     tickDecimals: 0, 
     tickColor: "rgba(0,0,0,0.04)", 
     font: { 
      color: 'rgba(0,0,0,0.4)', 
      size: 11 
     }, 
     tickFormatter: function (val, axis) { 
      if (val>999) {return (val/1000) + "K";} else {return val;} 
     } 
    }, 
    legend : { 
     labelBoxBorderColor: 'transparent' 
    } 
}; 





}]) 

的HTML

<div flot-chart style="width: 100%; height:250px" 
            data-flot-data="plotStatsData" 
            data-flot-options="plotStatsOptions" 
           ></div> 

Answer 1

你的初始數據只有三個數據點：

$scope.plotStatsData = [{data:[[1,500],[2,250],[3,150]], label:'TEST'}]; 

然後你更新數據，但只能做與現有的網格/軸的重繪。
插入調用setupGrid()，它應該工作：

scope.$watch('data', function (newVal, oldVal) { 
    console.log("DATA WATCH"); 
    plot.setData(newVal); 
    plot.setupGrid(); 
    plot.draw(); 
}); 

Answer 2

我找到了解決辦法。要正確地重新加載，而不是調用setData，並繪製函數。我簡單地更換以下列：

在指令變化：

plot.setData(newVal); 
plot.draw(); 

到

plot = $.plot($(element), newVal, scope.options); 

這似乎有效地迫使海軍報圖重新加載，並正確顯示數據集。 ：D