Высокие графики с использованием AngularJS, NodeJS и Mongoose

0

Я новичок в мире 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);
});
  • 0
    вам нужно попробовать угловую директиву для рендеринга высокоуровневой диаграммы github.com/pablojim/highcharts-ng, которая уменьшит большую часть вашей директивной работы по визуализации графа.
  • 0
    @PankajParkar, Спасибо, что ответили здесь, но мой вопрос в том, как интегрировать отдельный код узла и код Angular. Код узла получает данные из Mongo, а Angular отображает их, но я не знаю, как передать ответ метода foult.find в массив $ scope.ideas?
Теги:
express
mongoose
highcharts

1 ответ

0
Лучший ответ

Вы должны создать службу (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);
                       });
    });
  • 0
    Спасибо за ответ, но следует ли мне подключиться к MongoDB из сервиса? В основном, где я должен использовать метод foult.find, который я показал выше, который дает мне данные, которые я ищу? эта часть кода будет идти под комментарием "// вернуть обещание", который вы написали? Извините, если я задаю несколько глупых вопросов, но я новичок в этом, поэтому не очень осведомлен.
  • 0
    Этот код поиска должен быть запущен на сервере узла, а ваш угловой код работает на клиенте. Вам нужно будет настроить сервер узла с экспрессом, чтобы иметь маршруты, по которым вы можете вызывать данные. Вот скрипка, которая показывает базовый макет экспресс-приложения. Jsfiddle.net/t2gcgdvq. Вам нужно установить npm install express в свой проект.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню