Question

我正在使用flot chart Angularjs directive绘制堆积条形图。当我对终点进行异步调用以获取图表数据时，它无法显示。我怀疑它需要重绘。有一个draw()函数，看起来像是绘制flot图表。请帮我在Angularjs中重新绘制我的flot图表。

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

angular.module('myApp').controller('Step2Controller', function($scope, $location, $interval, dialogs, $modal, $transition, ReportingService) {

    ...

    $scope.tasksRunData = mainArray;
    $scope.tasksRunChartOptions = {
        legend: {
            show: true,
            margin: 2
        },
        xaxis: {
            ticks: yaxisArray,
            alignTicksWithAxis: "right"
        },
        grid: {
            labelMargin: 10,
            hoverable: true,
            borderWidth: 0
        },
        series: {
            stack: true
        },
        colors: colorCodesArray,
        tooltip: true
    };

    ...
    $scope.redrawTasksRunDataHistoByChart();
    ...

    $scope.redrawTasksRunDataHistoByChart = function() {
        $scope.tasksRunData.draw(); //TypeError: undefined is not a function
        alert("AAAA");
    }
});

更新

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

$scope.renderTasksRunDateHistoByType = function(jsonInput) {
            console.log(json[RUN_AGG_BY_DATE_HISTO].aggregations[TASK_TYPE_AGG].buckets);
    var yaxis = [];
    var buckets = json[RUN_AGG_BY_DATE_HISTO].aggregations[TASK_TYPE_AGG].buckets;
    var log = [];
    var mainArray = [];
    var colorCodes = ["#5C832F","#7B52AB","#263248","#AB1A25","#FF8598","#AB1A25","#FEB41C","#193441","#193441","#BEEB9F","#E3DB9A","#917A56"],
        idx = 0;
    angular.forEach(buckets, function(value, key) {        
        this.push(key + ': ' + value +", "+value["key"]);
        var dataArray = [], index = 0;
        console.log(JSON.stringify(value[RUN_OVER_TIME_KEY]["buckets"]));
        angular.forEach(value[RUN_OVER_TIME_KEY]["buckets"], function(value, key) {
            var dataArr = [];
            dataArr.push('['+index+', '+value["doc_count"]+']');
            dataArray.push(dataArr);

            yaxis.push(JSON.parse('['+index+', "'+$scope.translate(value["key"])+'", "'+value["key"]+'"]'));

            index++;
        }, log);
        var barObject = '"bars": {"show": "true", "barWidth":0.8, "fillColor": "'+colorCodes[idx]+'", "order": 1, "align": "center"}';
        var object = '{ "data": ['+dataArray+'], "label": "'+value["key"]+'", '+barObject+'}';
        mainArray.push(JSON.parse(object));
        idx++;
    }, log);

    console.log(yaxis);
    $scope.tasksRunData = mainArray;
    $scope.tasksRunChartOptions = {
        legend: {
            show: true,
            margin: 2
        },
        xaxis: {
            //ticks:[[0,'Oct 4'],[1,'Oct 5'],[2,'Oct 6'],[3,'Oct 7'],[4,'Oct 8'],[5,'Oct 9']],
            ticks: yaxis,
            alignTicksWithAxis: "right"
        },
        grid: {
            labelMargin: 10,
            hoverable: true,
            borderWidth: 0
        },
        series: {
            stack: true
        },
        colors: colorCodes,
        tooltip: true
    };
};

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

查看该指令的源代码，它会在$scope.dataset更改时自动重绘。

  $scope.redrawChart = function() {
    var tmp = [];
    for (var i = 0; i < 10; i++){
      tmp.push([i,Math.random() * 10]);
    }
    $scope.dataset = [{ data: tmp }];
  };

这是一个example。

更新编辑

我很难跟踪您的代码，但最终，您最终会在$scope.renderTasksRunDateHistoByType中使用变量jsonInput中的数据。然后，您将一些变量mainArray（尽管我不知道存在）存储到其他$scope级别变量中。我从未看到您将数据分配回$scope.dataset。这就是flot指令正在观察触发重绘的内容。就是这么简单。

   $scope.renderTasksRunDateHistoByType = function(jsonInput) {
      $scope.dataset = [{
        data: jsonInput
      }];

      //console.log(jsonInput);
      //$scope.tasksRunData = mainArray;
      //$scope.tasksRunChartOptions
      //getting data here once response is received from server
    };

查看更新here。

如何重绘angularjs中的flot图表？

1 个答案: