Question

使用 Highcharts 示例（here），我在 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>

现在我需要在图表中加载要动态加载的条形数，就像在数据库中更新计数一样，新值必须反映在图表中（实时数据） < / p>

你会看到我在我的文件中写了 data：function ，它在循环中更新数据数组：

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 [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 个答案: