在特定时间之后以角度js实时更新高图 [英] updating high chart on real time in angular js after a particular time

问题描述

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

I want to update high chart on real time in angular js after a particular time span and it should get reflects on html without user interaction in angular JS. Below are code for Controller,Directive and HTML. I am using rest web service to fetch the data from back end. Controller :

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="angular.js@*" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="highcharts@*" 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>

推荐答案

您可以使用< a href =https://docs.angularjs.org/api/ng/service/$interval =nofollow noreferrer> $ interval

You can make a request based on the interval using $interval

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

这篇关于在特定时间之后以角度js实时更新高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！