Jak utworzyć highchart (używając kątowego js) z danymi json pochodzącymi z zapytania Ajaxa

Moje pytanie jest powiązane z linkiem How to handle Highcharts events from an AngularJS directive?. Co się stanie, jeśli chcę wygenerować highchart z dynamicznych danych? mój obiekt wykresu jest zdefiniowany/skonfigurowany jak poniżej, wykres: { typ: 'bar' }, seria: [{ nazwa: "A, B, C, D ', Wynik: [1,2,2 , 3] }], legenda: { włączony false }Jak utworzyć highchart (używając kątowego js) z danymi json pochodzącymi z zapytania Ajaxa

chcę karmić odpowiadający 'name' i danych 'punktacji' dynamicznie ciąg json uzyskanych od żądania Ajax i ma postać,

[{"Nazwa": "A", "Wynik": 1}, {"Nazwa": "B", "Wynik": 2}]

Proszę dać mi znać, jeśli chcę podać inne szczegóły.

Wielkie dzięki.

Ponowne kadrowanie pytanie:

Chcę stworzyć highchart użyciu kątowych js. Mój plik JavaScript jest

var app = angular.module('charts', []); 
app.directive('highchart', function() { 
return { 
    restrict: 'E', 
    template: '<div></div>', 
    replace: true, 

    link: function (scope, element, attrs) { 

     scope.$watch(function() { return attrs.chart; }, function() { 

      if (!attrs.chart) return; 

      var charts = JSON.parse(attrs.chart); 

      $(element[0]).highcharts(charts); 

     }); 
    } 
}; 
}); 

app.controller('Ctrl', function ($scope, $http, $timeout) { 

$scope.overSpeedWorstRecords = []; 

$scope.handleOverSpeedWorstRecords = function (data, status) { 
    $scope.overSpeedWorstRecords = data;  
} 


$http.get('http://localhost:12345/abc/pqr').success($scope.handleOverSpeedWorstRecords).error("error message"); 


$timeout($scope.fetch, 1000); 


$scope.renderChart = { 
    chart: { 
     type: 'bar' 
    }, 
    series: [{ 
     name: 'A,B,C,D', 
     score: [1,2,2,3] 
    }], 
    legend: { 
     enabled: false 
    } 
}; 
});

jestem coraz moich danych json w overSpeedWorstRecords za pomocą kwerendy Ajax ($ http.get). Dodatkowo zdefiniowałem obiekt wykresu z "nazwą" i "wynikiem" na stałe. Przy tej konfiguracji Mam ten highchart załadowany danych zakodowanych i jestem coraz danych json, jak również których można uzyskać dostęp w HTML następująco,

<!DOCTYPE> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Dashboard Application</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script type="text/javascript" src="Scripts/DashboardCtrl.js"></script> 
</head> 
<body> 
    <section ng-app="charts"> 
    <div ng-controller="Ctrl"> 
     <highchart chart='{{renderChart}}'></highchart> 
     <table> 
      <tr ng-repeat="record in overSpeedWorstRecords"> 
       <td>{{record.Name}}</td> 
       <td>{{record.Score}}</td> 
      </tr> 
     </table> 
    </div> 
    </section> 
</body> 
</html>

Jednakże chcę karmić danych json której jestem przechodzenie przez wywołanie Ajax do obiektu wykresu w celu dynamicznego tworzenia wykresu słupkowego.

Proszę dać mi znać, jeśli będę musiał dokładniej rozwiązać ten problem.

Źródło

2013-07-03 user2547150

Pytania muszą wykazywać minimalne zrozumienie problemu, który jest rozwiązywany. Powiedz nam, co próbujesz zrobić, dlaczego to nie zadziałało i jak powinno działać. Zobacz też: [Lista kontrolna pytań dotyczących przepełnienia stosu] (http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist) – Stewie

Rozwiązanie problemu: -

Rozwiązałem problem sam. Zamieszczam to rozwiązanie na przyszłość i na wypadek, gdyby pomogło komuś, kto ma takie same wymagania.

Skrypt javascript został zmodyfikowany, aby umożliwić dostęp do Nazwy i wyniku z danych json. Zostały one zapisane w tablicach "name" i "score", które zostały przekazane do obiektu opcji wykresu w celu renderowania highchart.

var app = angular.module('charts', []); 

app.directive('highchart', function() { 
return { 
    restrict: 'E', 
    template: '<div></div>', 
    replace: true, 

    link: function (scope, element, attrs) { 

     scope.$watch(function() { return attrs.chart; }, function() { 

      if (!attrs.chart) return; 

      var charts = JSON.parse(attrs.chart); 

      $(element[0]).highcharts(charts); 

     }); 
    } 
}; 
}); 


app.controller('Ctrl', function ($scope, $http, $timeout) { 
$http.get('http://localhost:1234/abc/pqr').success(function (data, status) { 

    var score = []; 
    for (var i = 0; i < data.length; i++) { 
     score.push(data[i].Score); 
    } 

    var name = []; 
    for (var i = 0; i < data.length; i++) { 
     name.push(data[i].Name); 
    } 

    $scope.renderChart = { 
     chart: { 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: name 
     }, 
     series: [{ 
      data: score 
     }], 
     legend: { 
      enabled: false 
     } 
    }; 
}).error("error message"); 
$timeout($scope.fetch, 1000); 
});

Źródło

2013-07-08 16:01:46 user2547150

zamiast używania atrybutu "attrs" do śledzenia zmian, możesz użyć zamiast tego atrybut zakresu dyrektywy. Pozwala to na przekazanie zmiennej literalnej lub zakresu z kontrolera. To było przyczyną błędu, ale teraz zostało naprawione https://github.com/angular/angular.js/pull/5385 –

Jak utworzyć highchart (używając kątowego js) z danymi json pochodzącymi z zapytania Ajaxa

Odpowiedz

Powiązane problemy