Question

我是Javascript世界的初学者。我想在AngularJS上使用高图表（www.highcharts.com）作为pia图表。我在下面的例子中工作得很好但是下面的例子有＆＃34;想法＆＃34;数组静态，但我想从MongoDB而不是静态值这样做。我不确定在这里需要做些什么来使这种动态。我尝试了很少的东西，我能够从简单的NodeJS程序中获取Mongo的数据，但我不确定如何将其与AngularJS集成？如何更换＆＃34; $ scope.ideas＆＃34;使用我的NodeJS代码得到的数据值？

请帮助我，因为我完全混淆了下一步。我花了很多时间找出细节并做了一些事情，但没有运气。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/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>

简单节点查找方法如下所示，也使用mongoose。

foult.find({$and:[ {"instrument":"android"} , {"sentiments": {"$gt":0}} ]}, function(err, foult) {
  if (err) return console.error(err);
  androidSentimentArray = ["foult", foult.length];
  console.dir(foult);
});

Answer 1

您应该创建一个服务（单例）或工厂来发出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);
                       });
    });

使用AngularJS，NodeJS和Mongoose的Highcharts

1 个答案: