Javascript Flot js与角度问题

我正在使用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'
    }
};





}])

$scope.plotStatsData=[{data:[[1500]、[2250]、[3150]]，标签：'TEST'}]；
$scope.init=函数（）{
$scope.updateStats（）；
}
$scope.updateStats=函数（）{
$http.post（“/admin/dashboard/loaddata”，{start_date:$scope.drp_start，end_date:$scope.drp_end}）。成功（函数（响应）{
$scope.totals=response.summary；
//console.log（response.dataset）；
$scope.plotPoints（response.dataset）；
});
};
$scope.plotPoints=函数（数据）{
var layer1={data:[]，标签：'Users'}；
var计数=1；
如果（确认（“清除？”）
$scope.plotStatsData=[]；
对于（变量i=1；i999）{return（val/1000）+“K”}else{return val；}
}
},
图例：{
labelBoxBorderColor:“透明”
}
};
}])

HTML

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

---

您的初始数据只有三个数据点：

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

然后更新数据，但仅使用现有网格/轴重新绘制。
插入对的调用，该调用应能正常工作：

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

---

我找到了解决办法。使其正确重新加载，而不是调用setData和draw函数。我只是将其替换为以下内容：

在指令变更中：

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

到

---

这似乎有效地迫使flot图表重新加载并正确呈现数据集：这似乎不起作用plot.setData（newVal）；plot.setGrid（）；plot.draw（）；`。仍然是相同的结果。奇怪的是，这应该和你在答案中画一个完整的新图表一样。你能建立一个重现问题的图表吗？

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