javascript - 如何从当前导航器系列的 Highcharts 中获取摘要?

标签 javascript angularjs highcharts

我有一个 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;
}

最佳答案

采取一些不同的方法怎么样?检查现有点(当然是可见的点),然后将该数字除以 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

关于javascript - 如何从当前导航器系列的 Highcharts 中获取摘要?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30497998/

相关文章:

javascript - 使用 javascript 更改部分文本的背景颜色?

javascript - 如何复制搜索结果?

javascript - 超出最大调用堆栈大小 - 无限循环

javascript - AngularJS 应用程序无法正常运行

javascript - 如何提高 highcharts 图表创建和渲染的性能

highcharts 工具提示错误的日期

javascript - 设置没有值的属性

javascript - 使用 ng-repeat 以 Angular 将所选应用到最后一个选项

angularjs - React redux oop 类

javascript - 在 Vue JS 中是否可以让多个 vue 组件重用现有的数据结构和不同的数据?