在特定时间后在角度js上实时更新高图表

我想在角度js上实时更新特定时间跨度后的高图表，并且它应该在角度JS中没有用户交互的情况下在html上得到反映。下面是Controller，Directive和HTML的代码。我正在使用其他Web服务从后端获取数据。控制器：在特定时间后在角度js上实时更新高图表

function dashboardController($scope, $http) { 
    this.$scope = $scope; 

     $scope.init=function(){ 
      _refreshPageData(); 
      function _refreshPageData() { 
       $http({ 
        method : 'GET', 
        url : 'http://localhost:8080/SpringWebApp/rest/employee/monthlydata' 
       }).then(function successCallback(response) { 
        $scope.data = response.data; 
        var data = $scope.data; 
        var a = []; 
        parseInt($scope.data[0].data); 
        angular.forEach(data, function(data, key) { 
          a.push(parseInt(data.data)); 
         }); 
        console.log($scope.data); 
        $scope.chartConfig = { 
          xAxis: { 
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
          }, 
             title: { 
           text: 'USD to EUR exchange rate from 2006 through 2008' 
          },   subtitle: { 
           text: document.ontouchstart === undefined ? 
            'Click and drag in the plot area to zoom in' : 
            'Pinch the chart to zoom in' 
          }, 
          yAxis: { title: { text: 'Temperature (Celsius)' } }, 
          tooltip: { valueSuffix: ' celsius' }, 
          legend: { align: 'center', verticalAlign: 'bottom', borderWidth: 0 }, 
           plotOptions: { 
           area: { 
            fillColor: { 
             linearGradient: { x1: 200, y1: 220, x2: 220, y2: 2221}, 
             stops: [ 
              [0, Highcharts.getOptions().colors[0]], 
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
             ] 
            }, 
            marker: { 
             radius: 2 
            }, 
            lineWidth: 1, 
            states: { 
             hover: { 
              lineWidth: 1 
             } 
            }, 
            threshold: null 
           } 
          }, 
          series: [{ 
           type:'area', 
           data :a 
          }] 
        }; 
       }, function errorCallback(response) { 
        console.log(response.statusText); 
       }); 
      } 
     } 


} 

Directive : 

var chartDirective = function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div></div>', 
     scope: { 
      config: '=' 
     }, 
     link: function (scope, element, attrs) { 
      var chart; 
      var process = function() { 
       var defaultOptions = { 
        chart: { renderTo: element[0] }, 
       }; 
       var config = angular.extend(defaultOptions, scope.config); 
       chart = new Highcharts.Chart(config); 
      }; 
      process(); 
      scope.$watch("config.series", function (loading) { 
       process(); 
      }); 
      scope.$watch("config.loading", function (loading) { 
       if (!chart) { 
        return; 
       } 
       if (loading) { 
        chart.showLoading(); 
       } else { 
        chart.hideLoading(); 
       } 
      }); 
     } 
    }; 
}; 

Html : 

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script data-require="[email protected]*" data-semver="2.3.5" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js"></script> 
    <script src="chartDirective.js"></script> 
    <script src="dashboardController.js"></script> 
    <script src="app.js"></script> 
    <meta charset="utf-8"> 
    </head> 

    <body ng-app="app"> 
    <div ng-controller="dashboardController"> 
    <div ng-init="init()"></div> 
     <chart config="chartConfig"></chart> 
    </div> 
    </body> 
</html>

来源

2017-04-13 Piyush Vashist

使用$间隔的时间间隔的请求，并得到真实数据 – Sajeetharan

能否请您为同提供的例子吗？ –

，您可以根据使用$interval

$interval(function() { 
    YourApi.response.then, 
    series.addPoint([whatever); 
}, 1000);

来源

2017-04-13 12:51:10 Sajeetharan

感谢您的回复。系列正在更新，但图形没有改变。我正在使用高图表。 –

当您更新系列 – Sajeetharan

时，您需要在高图表中调用chart.redraw（），但我已经做了，但那不起作用。 –

在特定时间后在角度js上实时更新高图表

回答

相关问题