在一个控制器angularjs中从范围获取数据到另一个范围

Question

我绝对是 AngularJS 的初学者。所以，我会非常感谢任何帮助。我正在尝试使用 Ionic 和 Angular-nvD3 lineChart 构建一个包含图表的应用程序。我在 json 文件中有数据。所以，我创建了工厂并使用了 getData()、$scope 和服务。我需要一张带有许多数据点的折线图。但是输出看起来每个点都彼此分开。我想可能是因为 $scope 和 getData 函数。也许其中有某种循环，可以分离数据。我正在尝试重写代码以解决问题，将数据从工厂内的范围提取到另一个范围以分离此过程，但没有任何运气。我在 app.js 中的代码如下

(function() {
var app = angular.module('starter', ['ionic','nvd3']);

app.factory('services', ['$http', function($http){
  var serviceBase = 'services/'
  var object = {};
  object.getData = function(){
    return $http.get('chart.json');
  };
  return object;
}]);

app.controller('MainCtrl', ['$scope', 'services', function($scope, services) {

  services.getData().then(function successCb(data) {
    $scope.data = _.map(data.data, function(prod) {
      var sin = [];
      sin.push({
        x: prod.Date, 
        y: prod.low
      });
      return {
        values: sin,
        key: 'fff' 
      }
    });
  });

$scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                lines: {
                xScale: d3.time.scale(),
                },
                x: function(d){ return d3.time.format('%Y-%m-%d').parse(d.x); },
            y: function(d){ return d.y; },
            useInteractiveGuideline: true,
            dispatch: {
                stateChange: function(e){ console.log("stateChange"); },
                changeState: function(e){ console.log("changeState"); },
                tooltipShow: function(e){ console.log("tooltipShow"); },
                tooltipHide: function(e){ console.log("tooltipHide"); }
            },
            xAxis: {
                axisLabel: 'Time (ms)',
                tickFormat: function(d){
                    return d3.time.format('%d-%m-%Y')(d);
                },
            },
            yAxis: {
                axisLabel: 'Voltage (v)',
                tickFormat: function(d){
                    return d3.format('.02f')(d);
                },
                axisLabelDistance: -10
            },
            callback: function(chart){
                console.log("!!! lineChart callback !!!");
            }
        },
        title: {
            enable: true,
            text: 'Title for Line Chart'
        },
        subtitle: {
            enable: true,
            text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet, at eam blandit sadipscing, vim adhuc sanctus disputando ex, cu usu affert alienum urbanitas.',
            css: {
                'text-align': 'center',
                'margin': '10px 13px 0px 7px'
            }
        },
        caption: {
            enable: true,
            html: '<b>Figure 1.</b> Lorem ipsum dolor sit amet, at eam blandit sadipscing, <span style="text-decoration: underline;">vim adhuc sanctus disputando ex</span>, cu usu affert alienum urbanitas. <i>Cum in purto erat, mea ne nominavi persecuti reformidans.</i> Docendi blandit abhorreant ea has, minim tantas alterum pro eu. <span style="color: darkred;">Exerci graeci ad vix, elit tacimates ea duo</span>. Id mel eruditi fuisset. Stet vidit patrioque in pro, eum ex veri verterem abhorreant, id unum oportere intellegam nec<sup>[1, <a href="https://github.com/krispo/angular-nvd3" target="_blank">2</a>, 3]</sup>.',
            css: {
                'text-align': 'justify',
                'margin': '10px 13px 0px 7px'
            }
        }
    };
}]);

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});
}());

这是 JSON 文件中的数据

[
        {
            "Date": "2011-12-02",
            "low": 8758.22466765
        },
        {
            "Date": "2011-12-03",
            "low": 8771.50964703
        },
        {
            "Date": "2011-12-04",
            "low": 8784.79462641
        },
        {
            "Date": "2011-12-05",
            "low": 8798.07960579
        },
        {
            "Date": "2011-12-06",
            "low": 8689.04458518
        },
        {
            "Date": "2011-12-07",
            "low": 8720.07956456
        },
        {
            "Date": "2011-12-08",
            "low": 8718.97454394
        },
        {
            "Date": "2011-12-09",
            "low": 8584.72952332
        },
        {
            "Date": "2011-12-10",
            "low": 8616.084502700001
        },
        {
            "Date": "2011-12-11",
            "low": 8647.43948208
        },
        {
            "Date": "2011-12-12",
            "low": 8678.79446147
        },
        {
            "Date": "2011-12-13",
            "low": 8552.15944085
        },
        {
            "Date": "2011-12-14",
            "low": 8507.64442023
        },
        {
            "Date": "2011-12-15",
            "low": 8383.43939961
        },
        {
            "Date": "2011-12-16",
            "low": 8388.08437899
        },
        {
            "Date": "2011-12-17",
            "low": 8336.42602504
        },
        {
            "Date": "2011-12-18",
            "low": 8284.76767109
        },
        {
            "Date": "2011-12-19",
            "low": 8233.10931714
        },
        {
            "Date": "2011-12-20",
            "low": 8266.49429652
        },
        {
            "Date": "2011-12-21",
            "low": 8377.569275900001
        },
        {
            "Date": "2011-12-22",
            "low": 8308.55425529
        },
        {
            "Date": "2011-12-23",
            "low": 8319.82173467
        },
        {
            "Date": "2011-12-24",
            "low": 8331.08921405
        },
        {
            "Date": "2011-12-25",
            "low": 8342.35669343
        },
        {
            "Date": "2011-12-26",
            "low": 8353.62417281
        }
    ]

我正在尝试这样的事情：

    services.getData().then(function successCb(data) {
    $scope.data = _.map(data.data);
    });
     $scope.selectedSin = function(prod) {
      var sin = [];
      angular.forEach(data, function (sin) {
      sin.push({
        x: data.Date, 
        y: data.low
      });
      return {
        values: sin,
        key: 'fff' 
      }
  });
  };

但是控制台报错：

e.values 未定义

Image of the line chart

Answer 1

我在 Plunker 的 cmets 中找到了很好的答案： Load JSON Data into Angular-nvD3 Graph (AngularJS) 我刚刚将图表的名称更改为 lineChart，并将 ID 和 STOCK 更改为我的。 Plunker

services.getData().then(function successCb(data) {
$scope.barData = [];

var stock = {
  key: 'Product stock',
  values: []
};

stock.values = _.map(data.data, function(prod) {
  return {
    label: prod.Date,
    value: prod.low
  };
});
console.log(stock);
$scope.barData.push(stock);
});

Answer 2

 services.getData().then(function successCb(data) {
    $scope.data = _.map(data.data);
    });
     $scope.selectedSin = function(prod) {
      var sin = [];
      angular.forEach(data, function (sin) {
      sin.push({
        x: data.Date, 
        y: data.low
      });
      return {
        values: sin,
        key: 'fff' 
      }
  });
  };

在您上面的 sn-p 中，传递给 angular.forEach?

的 数据 来自哪里