javascript - Flot js 和 Angular 问题

Question

我正在使用流程图在仪表板上绘制一些点，但遇到了一些问题。

首先，仪表板是 Angular ，所以我设置了一个指令来初始化 flot，它似乎正在工作。该图表加载并绘制第一组可用数据。当我尝试更新用于生成图表的数据时，出现了问题。

当我执行此操作时，数据会更新，但仅显示前 3 个点，不会显示结果中的完整数据集 - 仅显示前 3 个图表值。检索到的 JSON 结果集的长度可能有所不同(返回的数据基于其他位置设置并由 updateStats 函数请求的日期值)。我需要它做什么，动态绘制所有数据的图表，而不仅仅是数据集中的前几行。

我不确定它为什么要这么做，并且已经放弃了把头撞在 table 上的想法: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

.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();
});