使用Highcharts和AngularJs的實時條形圖

Question

使用Highcharts示例（在此處），我已在AngularJs中加載了條形圖。

下面的HTML代碼：

<!DOCTYPE html>
<html ng-lang="en" ng-app="myModule">
<head>
<meta charset="ISO-8859-1">
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<title>Insert title here</title>
</head>
<script>
angular.module('myModule',[])
.controller('myController',function($q, $scope, $http){

    $scope.cnt = 1;
    var t = 0;
    setInterval(function(cnt){

        fetchData($scope.cnt).then(function(success){

            $scope.chartOptions={
                    chart: {
                        type: 'bar',
                        events:{
                            load:function(){
                                var rowClass = this.series[0];
                                console.log("rowClass : "+rowClass);
                            }
                        } 
                    },
                    title: {
                        text: 'ClassNames By Count Chart'
                    },
                    subtitle: {
                        text: 'Admin Chart'
                    },
                    xAxis: {
                        categories: $scope.rows,
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Population (millions)',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        valueSuffix: ' millions'
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 80,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: 'Year 1800',
                        data: (function(){
                            var data = [];
                            var i;
                            console.log("In Series function() : $scope.num : "+$scope.num );    //Update is being done propertly
                            for(i=1;i<4;i=i+1){
                                data.push($scope.num[i]);
                            }
                            return data;
                        }())
                    }, {    
                        name: 'Year 1900',
                        data: [133, 156, 947, 408, 6]
                    }, {
                        name: 'Year 2000',
                        data: [814, 841, 3714, 727, 31]
                    }, {
                        name: 'Year 2016',
                        data: [1216, 1001, 4436, 738, 40]
                    }]
            };

            if(t==0){
                t = t+1;
                Highcharts.chart('container',$scope.chartOptions);
            }
        },function(error){
            console.log("in error functio : "+error);
        });
    },2000);

    var cnt = 0;
    var str = "str";
    setInterval(function(){
        str = str+cnt;
        cnt++;
        $http({
            method: "GET",
            url : "http://localhost:8080/hello/"+str+"/3"
        }).then(function success(data){
        }, function error(data){
            console.log("error "+data.data);
        });
    },5000);

    var fetchData = function(cnt){
        $scope.cnt = $scope.cnt+1;

        var deferred = $q.defer();

            $http({
                method : "GET",
                url : "http://localhost:8080/hello"
            }).then(function mySuccess(response) {
                $scope.myRes = response.data;
                $scope.rows = $scope.myRes;
                var i;
                $scope.num = [];
                for(i=0;i<4;i=i+1){
                    $scope.num.push(++cnt*110);
                }

                deferred.resolve();
            }, function myError(response) {
                console.log("error");
                $scope.myRes = response;
                deferred.reject();
            });

        return deferred.promise;
    };  

});

</script>
<body ng-controller="myController">
    <hcbar options="chartOptions"></hcbar>
    <div id="container"></div>

</body>
</html>

現在，我需要在圖表中加載條形圖以動態加載，即隨着數據庫中計數的更新，新值必須反映在圖表中（實時數據）

您將看到我在文件中寫入了data：函數，該文件在循環中更新了數據數組：

series: [{
    name: 'Year 1800',
    data: (function(){
        var data = [];
        var i;
        console.log("In Series function() : $scope.num : "+$scope.num );    //Update is being done propertly
        for(i=1;i<4;i=i+1){
            da.push($scope.num[i]);
        }
        returndata;
    }())
},

更新的值已正確打印在控制台中，但未反映在圖表欄中！

我知道有此功能addPoint（）將點添加到數組。 但是在這里，我不想在series數組中使用新的Object，而在series [0] .data數組中不需要更新的值！

如何做到這一點？

Answer 1

如果將值放在$ scope中，並使用如下所示。

series: [{
          data: [
                { name: 'Year 1800', y: $scope.num1, color: 'red' },
                { name: 'Year 1900', y: $scope.num2, color: 'green' },
                { name: 'Year 2000', y: $scope.num3, color: 'blue' },
                { name: 'Year 2016', y: $scope.num4, color: 'yellow' }
            ]
        }],

當您更新$ scope.num1時 ，它肯定會在圖表中更新。

這是一個工作示例。

$scope.chartOptions = {
        chart: {
          type: 'column',
          spacingLeft: 0,
          spacingRight: 0,
          height: 300
        },
        title: {
          text: ''
        },
        xAxis: {
          categories: ['1800', '1900', '2000', 2016'],
          crosshair: true
        },
        yAxis: {
          min: 0,
          tickInterval: 20,
          title: {
            text: ''
          },
          labels:
          {
            enabled: false
          }
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        credits: {
          enabled: false
        },
        series: [{
          data: [
                { name: 'Year 1800', y: $scope.num1, color: 'red' },
                { name: 'Year 1900', y: $scope.num2, color: 'green' },
                { name: 'Year 2000', y: $scope.num3, color: 'blue' },
                { name: 'Year 2016', y: $scope.num4, color: 'yellow' }
            ]
        }]
     };

使用Highcharts和AngularJs的實時條形圖

問題描述

1 個解決方案

解決方案1
1 2018-05-07 09:45:28

使用Highcharts和AngularJs的實時條形圖

問題描述

1 個解決方案

解決方案1 1 2018-05-07 09:45:28

解決方案1
1 2018-05-07 09:45:28