Come produrre un diagramma alto (utilizzando js angolari) con dati json provenienti da una richiesta Ajax

La mia domanda è correlata al collegamento How to handle Highcharts events from an AngularJS directive?. Cosa succede se voglio avere il diagramma alto generato da dati dinamici? il mio oggetto grafico è definito/configurato come di seguito, grafico: { Tipo: 'bar' }, serie: [{ nome: 'A, B, C, D', punteggio: [1,2,2 , 3] }], leggenda: { enabled: false }Come produrre un diagramma alto (utilizzando js angolari) con dati json provenienti da una richiesta Ajax

voglio alimentare la corrispondente 'nome' e dati 'Score' dinamicamente da stringa jSON ottenuto dalla richiesta Ajax ed è di forma,

[{"Nome": "A", "Punteggio": 1}, {"Nome": "B", "Punteggio": 2}]

Per favore fatemi sapere se ho bisogno di fornire altri dettagli.

Molte grazie.

Re-inquadrare la questione:

Voglio creare un highchart utilizzando js angolari. Il mio file javascript è

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 
    } 
}; 
});

sto ottenendo i miei dati JSON in overSpeedWorstRecords attraverso una query Ajax ($ http.get). Inoltre, ho definito un oggetto grafico con "nome" e "punteggio" hardcoded. Con questa configurazione Sto avendo lo highchart caricato con i dati hardcoded e sto ottenendo i dati JSON così che io possa accedere nel codice HTML come segue,

<!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>

Tuttavia, voglio per alimentare i dati JSON cui sono passare attraverso la chiamata Ajax, all'oggetto grafico per creare dinamicamente il grafico a barre.

Per favore fatemi sapere se ho bisogno di approfondire il problema.

fonte

2013-07-03 user2547150

Le domande devono dimostrare una comprensione minima del problema da risolvere. Dicci cosa hai cercato di fare, perché non ha funzionato e come dovrebbe funzionare. Vedi anche: [Lista di controllo domanda Stack Overflow] (http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist) – Stewie

soluzione al problema: -

ho risolto il problema da solo. Sto postando questa soluzione per il mio riferimento futuro e nel caso in cui aiuti qualcuno che ha lo stesso requisito.

Il javascript è stato modificato in modo da poter accedere al nome e al punteggio dai dati di JSON. Sono stati memorizzati negli array 'name' e 'score' che sono stati passati all'oggetto opzione chart per eseguire il rendering dell'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); 
});

fonte

2013-07-08 16:01:46 user2547150

invece di usare l'attributo 'attrs' passato per controllare le modifiche, puoi usare invece l'attributo scope della direttiva. Ciò ti consente di passare una variabile letterale o scope dal tuo controller. Questo era un errore, ma ora è stato corretto https://github.com/angular/angular.js/pull/5385 –

Come produrre un diagramma alto (utilizzando js angolari) con dati json provenienti da una richiesta Ajax

risposta

Problemi correlati