如何从当前导航器系列的高级图表中获取摘要?

时间:2015-05-28 05:35:53

标签: javascript angularjs highcharts

我有一个高图,显示使用导航器在一段时间内运行的任务。有没有办法显示所有任务的自定义摘要,显示成功,失败或警告任务的数量以及所选日期范围?

注意:当导航器更改时,摘要也会更新。这是我的plunker

我读了here使用setExtremes我可以获得导航器放置事件,但看起来我只得到日期而不是其他数据字段。

xAxis: {
    type: 'datetime',
    gridLineWidth: 1,
    tickInterval: 1 * 3600 * 1000,
    dateTimeLabelFormats: {
        month: '%b %e, %Y'
    },
    events: {
        setExtremes: function(e) {

            if (e.trigger == 'navigator') {
                $scope.taskstatus = e.min + " - " + e.max;
            }

        }
    }
},

预期摘要

enter image description here

更新

我正在使用highstock 2.0.4版本我无法找到我的plunker中存在的currentTarget

对于highstock 2.0.4以下版本是setExtremes函数,它有时会给出不正确的计数,请帮忙

$scope.setExtremesCall = function(e) {
    if (e.trigger == 'navigator') {
        var ftasks = 0,
            stasks = 0,
            wtasks = 0,
            alltasks = [];
        var currentSeriesArr = e.target.series;
        angular.forEach(currentSeriesArr, function(obj) {
            var currdatapoints = obj.segments;
            if (currdatapoints.length > 0) {
                angular.forEach(currdatapoints, function(inrobj) {
                    var firstKey = $scope.getFirstKey(inrobj),
                        taskStatus = $scope.getJobStatus(inrobj[firstKey].color);
                    if (taskStatus != null) {
                        if (taskStatus == "FAILED") {
                            ftasks++;
                        } else if (taskStatus == "SUCCESS") {
                            if (stasks == 4)
                                $scope.a = 1;
                            stasks++;
                        } else if (taskStatus == "WARNING") {
                            wtasks++;
                        }
                    }
                });
            }
        });
        taskstatus = e.min + " - " + e.max + " " + ftasks + " Failed, " + stasks + " Success, " + wtasks + " Warning";
        console.log(taskstatus);
    }
}

$scope.getFirstKey = function(data) {
    for (elem in data)
        return elem;
}

$scope.getJobStatus = function(stat) {
    if (stat == "#8CC051")
        return "SUCCESS";
    else if (stat == "#FF2A00")
        return "FAILED"
    else if (stat == "#FFCC4E")
        return "WARNING";
    return null;
}

1 个答案:

答案 0 :(得分:1)

有点不同的做法。检查现有点(当然可见),然后将该数除以2(每条线从两点构建)。像这样:

      afterSetExtremes: function(e) {
          var stat = {
             FAILED: 0,
             SUCCESS: 0,
             WARNING: 0
          },
          status;
          if (e.trigger == 'navigator') {
            var series = this.series;
            angular.forEach(series, function(serie, j) {
              angular.forEach(serie.points, function(p, i) {
                 if(p.isInside) {
                    status = $scope.getJobStatus(p.color);
                    stat[status] ++
                 }
              });
            });

            taskstatus = e.min +" - "+ e.max+" "+ Math.ceil(stat.FAILED / 2) + " Failed, "+ Math.ceil(stat.SUCCESS / 2) +" Success, "+ Math.ceil(stat.WARNING / 2)+" Warning";
            $('#summary').html(taskstatus);
          }
      }

现场演示:http://plnkr.co/edit/btWjdME5UomLpsG6F1y5?p=preview