Question

我正在AngularJS应用程序中进行实时AmCharts，我想知道如何将数据点推入图表。以下是我的控制器中的代码：

$http.get(hostNameService.getHostName()+"/dashboard/itemValue")
            .then(function (response) {$scope.item = response.data.items;
                function generateChartData(){
                    var chartData = [];
                    for (var i = 0; i < $scope.item.length; i++ ) {
                        var itemId = $scope.item[i].itemId;
                        var avail = $scope.item[i].itemAvailability;

                        chartData.push( {
                            "itemId": itemId,
                            "avail": avail
                        } );
                    }

                    return chartData;
                }

                /**
                 * Create the chart
                 */
                var chart = AmCharts.makeChart( "toolAvailability", {
                    "type": "serial",
                    "theme": "light",
                    "zoomOutButton": {
                        "backgroundColor": '#000000',
                        "backgroundAlpha": 0.15
                    },
                    "dataProvider": generateChartData(),
                    "categoryField": "itemId",
                    "graphs": [ {
                        "id": "g1",
                        "valueField": "avail",
                        "bullet": "round",
                        "bulletBorderColor": "#FFFFFF",
                        "bulletBorderThickness": 2,
                        "lineThickness": 2,
                        "lineColor": "#b5030d",
                        "negativeLineColor": "#0352b5",
                        "hideBulletsCount": 50
                    } ],
                    "chartCursor": {
                        "cursorPosition": "mouse"
                    }
                } )

                /**
                 * Set interval to push new data points periodically
                 */
                // set up the chart to update every second
                setInterval( function() {
                    // normally you would load new datapoints here,
                    // but we will just generate some random values
                    // and remove the value from the beginning so that
                    // we get nice sliding graph feeling

                    // remove datapoint from the beginning
                    chart.dataProvider.shift();

                    // for (var i = 0; i < $scope.item.length; i++ ) {
                    //     var itemId = $scope.item[i].itemId;
                    //     var avail = $scope.item[i].itemAvailability;
                    // }


                    chart.dataProvider.push( {// not sure how I can push the json data here
                        date: //need to push the value here,
                        visits: //need to push the value here
                    } );
                    chart.validateData();
                }, 1000 );
            });

我的图表是从网络服务获取数据。 Web服务返回10个项目，每个项目的可用性应实时更新。我在图表中使用itemId和availability。最初我能够在图表中加载数据。但是当图表移动一个值时，我应该如何推动新值。任何人都可以让我知道如何实现这一功能。

Answer 1

我能够通过在代码中进行以下更改来实现此目的。我添加了以下函数，并在set timeout函数中调用了此函数。因此，对于图表中的每个班次，一个值将被推入图表中。

    function pushNewData(index){
                        var itemId = $scope.tools[index].itemId;
                        var avail = $scope.tools[index].availability;

                        chart.dataProvider.push( {
                            itemId: itemId,
                            avail: avail
                        } );

                    }

                var i =0;
                setInterval( function() {
                    chart.dataProvider.shift();
                    pushNewData(i);
                    if(i < $scope.items.length - 1){
                        i++;
                    }else{
                        i = 0;
                    }


                    chart.validateData();
                }, 1000 );

如何实时推送数据点AmCharts

1 个答案: