диаграммы с использованием только javascript и без jquery

#javascript #jquery #angularjs #highcharts #real-time

#javascript #jquery #angularjs #графики с использованием High #в режиме реального времени

Вопрос:

Итак, без jquery я хочу обновлять высокие диаграммы новыми данными в реальном времени. У меня есть диаграмма, которая отображает данные из базы данных, и я выполняю http-запрос get, чтобы получать данные каждые несколько секунд. Я могу правильно собирать данные, но когда я помещаю новые данные в переменную ряда для диаграммы, график не обновляется в режиме реального времени. Он обновляется только при обновлении. Как я могу это исправить? Я использую высокие диаграммы в angularjs.

Ответ №1:

вы должны вызвать series.addPoint() вместо того, чтобы просто обновлять массив данных

1. Если я попытаюсь это сделать, он скажет «Ошибка: $scope.chartOptions.series.addPoint не является функцией, я предполагаю, что это потому, что я не использую jQuery?

2. можете ли вы пройти свой код? вам нужна ссылка на объект highcharts в вашей переменной scope.

3. я опубликовал схему того, как это выглядит.

4. При создании диаграммы возвращается объект диаграммы. После этого используйте someChartVariable.series[index].addPoint(point) для добавления point в ряд в определенной index для диаграммы переменной someChartVariable .

Ответ №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
    }

});

Ответ №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
        })



    };

}]);

Ответ №4:

Вот мое решение для использования функции Highcharts addPoint в директиве highcharts-ng:

 $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
    }