根据范围选择更改flot chart数据阵列的最佳方法是什么？

Question

我使用angularjs flot和slider来显示一些图表,并根据范围选择,数据可视化应该在flot图表中更改.

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

注意:$scope.tasksRunDataChartObject;来自服务器的json数据为flot chart格式化

滑块截图和代码

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

flot chart

Answer 1

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

但是,我们遇到了问题.您正在使用的角度指令仅监视一件事来触发正确的流重绘 - 绘图的数据集.那岂不是真棒,不过,如果它也可能看你$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的力量......