Angularjs 根据范围选择更改flot图表数据数组的最佳方法是什么？

我正在使用angularjs并显示一些图表，基于范围选择，数据可视化应该在flot图表中更改

我的问题是，根据范围选择，可视化数据的最佳方式是什么？我是否需要在每次选择范围时添加/删除flot图表数据，还是有更好的方法？我在下面提供了我的源代码和一些截图。请帮忙

注意：

$scope.tasksrundatchart对象将来自服务器的json数据格式化为flot图表

滑块屏幕截图和代码

Chrome调试屏幕截图


更新

ReportService.getTasksRunDateHistoByType().then(function(result) {
    $scope.renderTasksRunDateHistoByType(result);
});

$scope.renderTasksRunDateHistoByType = function(json) {

    var buckets = json[RUN_AGG_BY_DATE_HISTO].aggregations[TASK_TYPE_AGG].buckets;
    var log = [];
    var mainArray = [];
    var colorCodes = ["#7BC253","#9C77D7","#399CEA","#FF6244","#FF7FB5","#00D3AB","#FFCC4C","#193441","#193441","#BEEB9F","#E3DB9A","#917A56"],
        idx = 0;
    angular.forEach(buckets, function(value, key) {        
        this.push(key + ': ' + value +", "+value["key"]);
        var dataArray = [], index = 0;
        angular.forEach(value[RUN_OVER_TIME_KEY]["buckets"], function(value, key) {
            var dataArr = [];
            dataArr.push('['+value["key"]+', '+value["doc_count"]+']');
            dataArray.push(dataArr);
            index++;
        }, log);
        var barObject = '"bars": {"show": "true", "barWidth":'+23*60*60*1000+', "fillColor": "'+colorCodes[idx]+'", "order": 1, "align": "center"}';            
        var object = '{ "data": ['+dataArray+'], "label": "'+value["key"]+'", '+barObject+'}';            
        mainArray.push(JSON.parse(object));
        idx++;
    }, log);
    $scope.tasksRunData = mainArray;
    $scope.tasksRunChartOptions = {
        legend: {
            show: true,
            margin: 2
        },
        xaxis: {
            mode: "time", timeformat: "%m/%d/%y", minTickSize: [1, "day"]
        },
        grid: {
            labelMargin: 10,
            hoverable: true,
            borderWidth: 0
        },
        series: {
            stack: true
        },
        colors: colorCodes,
        tooltip: true
    };
    return mainArray;
}

Angularjs服务

angular.module('myApp')
.service('ReportService', function ReportService($http, $q) {

    var getTasksRunDateHistoByType = function() {
        var deferred = $q.defer();
        $http({
            method: 'POST',
            url: "http://localhost:4040/reports/taskRun",
            data: '{ "client_user_info": { "client_id": "MU03"}}'
        }).
        success(function(result, status, headers, config) {
            deferred.resolve(result);
        }).
        error(function(result, status, headers, config) {
            console.log("Error");
        });
        return deferred.promise;
    };

    return {
        getTasksRunDateHistoByType: getTasksRunDateHistoByType
    };
});

弗洛特图

从您的问题来看，您似乎在对
幻灯片事件进行AJAX调用，并交换图表上的数据。这会起作用，但速度很慢，无法提供最佳的用户体验。相反，我会用所有数据绘制整个图表。然后，当用户滑动并重新绘制时，我会调整图表的最小/最大值。这样，您只需加载一个AJAX即可填充所有数据，并且图表会快速更新

但是，我们有一个问题。您使用的angular指令只监视一件事来触发正确的流重画——绘图的数据集。但是，如果它还可以监视您的
$scope.reportTasksRunRange.min
和
$scope.reportTasksRunRange.max
，并且如果这些更改会触发重画，那不是很棒吗？这真的是angularjs数据绑定的核心

那么，让我们“修复”指令。您只需首先更改范围：

scope: {
  dataset: '=',
  min: '=',
  max: '=',
  options: '=',
  callback: '='
},

并添加两个
$watch
：

  onMinChanged = function(min) {
    if (plot) {
      plot.getOptions().xaxes[0].min = min;
      plot.setupGrid();
      return plot.draw();
    }
  };
  onMaxChanged = function(min) {
    if (plot) {
      plot.getOptions().xaxes[0].max = max;
      plot.setupGrid();
      return plot.draw();
    }
  };
  scope.$watch('min', onMinChanged, true);
  scope.$watch('max', onMaxChanged, true);

这是我的拼图

Angularjs的力量

scope: {
  dataset: '=',
  min: '=',
  max: '=',
  options: '=',
  callback: '='
},

  onMinChanged = function(min) {
    if (plot) {
      plot.getOptions().xaxes[0].min = min;
      plot.setupGrid();
      return plot.draw();
    }
  };
  onMaxChanged = function(min) {
    if (plot) {
      plot.getOptions().xaxes[0].max = max;
      plot.setupGrid();
      return plot.draw();
    }
  };
  scope.$watch('min', onMinChanged, true);
  scope.$watch('max', onMaxChanged, true);