只有javascript没有jquery的highcharts

Question

所以如果没有 jquery，我想用新数据实时更新 highcharts。我有一个显示来自数据库的数据的图表，并且我正在执行 http get 请求以每隔几秒获取一次数据。我能够正确获取数据，但是当我将新数据推送到图表的系列变量时，图表不会实时更新。它只在我刷新时更新。我怎样才能解决这个问题？我在 angularjs 中使用 highcharts。

Answer 1

你应该调用series.addPoint() 而不是仅仅更新数据数组

Answer 2

请看这里http://jsfiddle.net/9m3fg/1

js:

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.addPoints = function () {
        var seriesArray = $scope.chartConfig.series
        var newValue = Math.floor((Math.random() * 10) + 1);
        $scope.chartConfig.xAxis.currentMax++;
        //if you've got one series push new value to that series    

        seriesArray[0].data.push(newValue);
    };



    $scope.chartConfig = {
        options: {
            chart: {
                type: 'line',
                zoomType: 'x'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10]
        }],
        title: {
            text: 'Hello'
        },
        xAxis: {
            currentMin: 0,
            currentMax: 10,
            minRange: 1
        },
        loading: false
    }

});

Answer 3

从您的代码看来，您想添加新系列而不是新数据，如果是，请参见此处：http://jsfiddle.net/bYx4a/

var app = angular.module('app', ["highcharts-ng"]);

app.controller("myCtrl", ['$scope', '$http', function ($scope, $http) {
    var count = 0;

    $scope.chartOptions = {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },

        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }]
    };

    $scope.addSeries = function () {

        var newData = {
            name: 'John',
            data: [1, 4, 3]
        };

        $scope.chartOptions.series.push({
            name: newData.name,
            data: newData.data
        })



    };

}]);

Answer 4

这是我在 highcharts-ng 指令中使用 Highcharts addPoint 函数的解决方案：

$scope.chart_realtimeForceConfig = {
        options: {
            chart: {
                type: 'line',
            },
            plotOptions: {
                series: {
                    animation: false                                
                },               
            },           
        },
        series: [
            {
                name: 'Fx',
                data: []          
            },          
        ],
        func: function(chart) {
            $timeout(function() {
                chart.reflow();
                $scope.highchart = chart;
            }, 300);

            socket.on('ati_sensordata', function(data) {
                if (data) {
                    var splited = data.split('|');

                        if (splited.length >= 6) {
                            var val = parseFloat(splited[5]);
                            var shift = chart.series[0].data.length > 100;
                            chart.series[0].addPoint(val, true, shift, false);

                    }
                }
            });


        },
        loading: false
    }