angularjs - 根据范围选择更改流程图数据数组的最佳方法是什么？

Question

我正在使用 angularjs flot和 slider要显示一些图表，并根据范围选择，数据可视化应该在流程图中发生变化。

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

注意:$scope.tasksRunDataChartObject; 具有来自服务器的 json 数据，格式为流程图

slider 截图和代码

<rzslider rz-slider-floor="reportTasksRunRange.floor" 
    rz-slider-ceil="reportTasksRunRange.ceil" 
    rz-slider-model="reportTasksRunRange.min" 
    rz-slider-high="reportTasksRunRange.max" 
    rz-slider-translate="translate" rz-slider-step="{{reportTasksRunRange.step}}"></rzslider>

<flot dataset="tasksRunData" options="tasksRunChartOptions" class="center-block" width="100%" height="400px" ></flot>

$scope.reportTasksRunRange = {
    min: 1412380800000,
    max: 1412812800000,       
    floor: 1412380800000,
    ceil: 1412812800000,
    step: 1412467200000-1412380800000
};

$scope.translate = function(value) {
    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
    var myDate = new Date( value );
    return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " '"+myDate.getFullYear();
}

$scope.$on('slideEnded', function () {
     console.log("slideEnded Event Fired : " +$scope.translate($scope.reportTasksRunRange.min)+" - "+$scope.translate($scope.reportTasksRunRange.max));
     $scope.redrawTasksRunDataHistoByChart($scope.translate($scope.reportTasksRunRange.min), $scope.translate($scope.reportTasksRunRange.max));             
});

$scope.redrawTasksRunDataHistoByChart = function(min, max) {
    var mainArray = $scope.tasksRunDataChartObject;
    console.log("mainArray");
    console.log(mainArray);
    /*var dataArray = mainArray[0]["data"];        
    dataArray.splice(2,1);
    mainArray[0]["data"] = dataArray;
    mainArray[0]["data"] = mainArray[0]["data"].splice(2,1);
    $scope.tasksRunData = mainArray;
    console.log(mainArray);*/
}

来自服务器的Json数据

{
    "date_histo_agg_by_type": {
        "took": 332,
        "timed_out": false,
        "_shards": {
            "total": 5,
            "successful": 5,
            "failed": 0
        },
        "hits": {
            "total": 14868,
            "max_score": 0.0,
            "hits": []
        },
        "aggregations": {
            "task_type": {
                "buckets": [{
                    "key": "DSS",
                    "doc_count": 14868,
                    "run_over_time": {
                        "buckets": [{
                            "key_as_string": "2014-10-04T00:00:00.000Z",
                            "key": 1412380800000,
                            "doc_count": 477
                        },
                        {
                            "key_as_string": "2014-10-05T00:00:00.000Z",
                            "key": 1412467200000,
                            "doc_count": 3015
                        },
                        {
                            "key_as_string": "2014-10-06T00:00:00.000Z",
                            "key": 1412553600000,
                            "doc_count": 2988
                        },
                        {
                            "key_as_string": "2014-10-07T00:00:00.000Z",
                            "key": 1412640000000,
                            "doc_count": 3123
                        },
                        {
                            "key_as_string": "2014-10-08T00:00:00.000Z",
                            "key": 1412726400000,
                            "doc_count": 2970
                        },
                        {
                            "key_as_string": "2014-10-09T00:00:00.000Z",
                            "key": 1412812800000,
                            "doc_count": 2295
                        }]
                    }
                }
            }
        }
    }
}

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

流程图

Answer 1

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

但是，我们遇到了问题。您正在使用的 Angular 指令仅监视一件事以触发适当的流程重绘 - 绘图的数据集。不过，如果它还可以监视您的 $scope.reportTasksRunRange.min 和 $scope.reportTasksRunRange.max 并且这些更改是否会触发重绘，那不是很棒吗？这确实是 angularjs 数据绑定(bind)的核心!

那么，让我们“修复”该指令。您需要做的就是首先更改范围:

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);

这是我的 example把这些放在一起。

Angularjs 的力量...