Highchart не работает, когда я выбираю значения осей из базы данных

Question

Я использую ASP .Net web api для извлечения данных из базы данных, и пытаюсь составить график производных данных, используя Highchart. Когда я даю значения оси в виде:

    xAxis: {
                categories:["Sabab","Sunjare","Ety"]
            },

 series: [{
             data: [20,30,40]
         }]

работает нормально. Но когда я инициализирую категории xAxis и данные рядов данными, полученными из базы данных, тогда граф не формируется. Вот код углового контроллера.

app.controller('chartController', function ($scope,chartService) {



    loadStudentName();

    function loadStudentName() {
        var promiseget = chartService.getStudentName();

        promiseget.then(function (p1) { $scope.StudentNames = p1.data },
            function (errorP1) {
                alert("Error Occurred");
            });
    }


    loadTotalMarks();

    function loadTotalMarks() {
        var promiseget = chartService.getTotalMarks();

        promiseget.then(function (p1) { $scope.TotalMarks = p1.data },
            function (errorP1) {
                alert("Error occured");
            }
        );
    }


    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },

        xAxis: {
            categories:$scope.StudentNames
        },
        yAxis: {
            title: {
                text:"Marks"
            },

        },


        series: [{
            name: "Marks",
            data: $scope.TotalMarks
        }]
    });



});

$scope.StudentNames заполняется ["Ety","Sabab","Sunjare","Sadia"] из базы данных, а $scope.TotalMarks заполняется [393,390,394,341] из базы данных, но график еще не сформирован.

Answer 1

Вам нужно обновить свои старшие чарты после обновления данных, либо:

1. поместите часы в оба ваших объекта данных и выполните chart.redraw (); если это меняет
2. вызов метода перерисовки после обновления данных внутри обещания.

Я рекомендую создать директиву, которая принимает объект конфигурации highchart и следит за изменениями, а затем перерисовывает диаграмму, чтобы вы могли использовать ее повторно.