Я новичок в мире Javascript. Я пытаюсь использовать высокие графики (www.highcharts.com) для диаграмм pia на AngularJS. У меня есть пример, который работает отлично, но ниже пример имеет массив "идей", но я хотел сделать это от MongoDB, а не от статического значения. Я не уверен, что нужно сделать здесь, чтобы сделать эту динамику. Я пробовал немного вещей, и я могу получить данные от Mongo по простой программе NodeJS, но я не уверен, как мне интегрировать это с AngularJS? Как заменить значение $ scope.ideas на данные, которые я получаю на свой код NodeJS?
Пожалуйста, помогите мне, поскольку я полностью смущаюсь следующим шагом здесь. Я потратил много времени, чтобы узнать подробности и сделать несколько вещей, но не повезло.
<script src="/jquery.min.js"></script>
<script src="/angular.min.js"></script>
<script src="/highcharts.js"></script>
<script src="/highcharts-more.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="hc-pie" items="limitedIdeas"></div>
</div>
</div>
<script>
function MyCtrl($scope, limitToFilter) {
$scope.ideas = [
['ideas1', 1],
['ideas2', 8],
['ideas3', 5]
];
$scope.limitedIdeas = limitToFilter($scope.ideas, 3);
}
angular.module('myApp', [])
.directive('hcPie', function () {
return {
restrict: 'C',
replace: true,
scope: {
items: '='
},
controller: function ($scope, $element, $attrs) {
console.log(2);
},
template: '<div id="container" style="margin: 0 auto">not working</div>',
link: function (scope, element, attrs) {
console.log(3);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: scope.items
}]
});
scope.$watch("items", function (newValue) {
chart.series[0].setData(newValue, true);
}, true);
}
}
});
</script>
Простой метод поиска узлов, как показано ниже, использует мангуст.
foult.find({$and:[ {"instrument":"android"} , {"sentiments": {"$gt":0}} ]}, function(err, foult) {
if (err) return console.error(err);
androidSentimentArray = ["foult", foult.length];
console.dir(foult);
});
Вы должны создать службу (singleton) или factory, чтобы сделать http-запрос и получить/отправить данные на сервер узлов, и вы будете вводить службу/фабрику в свой контроллер.
angular.module('').controller('myController', function(ideasService) {
ideasService.getIdeas()
.then(function(result) {
//Apply returned data to view
$scope.ideas = result.data;
});
});
angular.module('')
.service('ideasService', function($http) {
this.getIdeas = function() {
//returns promise
return $http.get('url')
.then(function(response) {
console.log(response.data);
});
});