Получить данные из области действия в другую область действия в пределах одного контроллера angularjs

Question

Я абсолютно новичок в AngularJS. Поэтому я буду очень благодарен за любую помощь. Я пытаюсь создать приложение с диаграммами в нем, используя Ionic и Angular-nvD3 lineChart. У меня есть данные в json-файле. Итак, я сделал завод и использовал getData(), $ scope и service. Мне нужна одна линейная диаграмма с множеством точек данных. Но вывод выглядит так, что каждая точка отделена от другой. Я думал, возможно, это из-за функции $ 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: 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' 
     } 
    }); 
    }; 

В вашем фрагменте кода выше, откуда данные приходит, что передается angular.forEach?