来自 Json 操作的数据 AngularJS

Question

我正在尝试使用 Angular JS 绘制折线图，但一直在操作 json 文件。

我有 aapl.json 看起来像：

{
    "date":"2009-07-23",
    "numOfTweet":13,
    "oldScore":1,
    "newScore":0,
    "percentage1":-100,
    "appleClosePrice":21.27,
    "percentage2":0
  },
  {
    "date":"2009-07-24",
    "numOfTweet":32,
    "oldScore":2,
    "newScore":0,
    "percentage1":-100,
    "appleClosePrice":21.56,
    "percentage2":68.17113305
  },

并且我已经从 Javascript

中的 json 文件访问了这些数据

app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('stock/aapl.json').success(function(data) {
      $scope.series = ['Stock Market', 'Tweet Mood'];
      $scope.stocks = data;
  });
}]);

我可以用 HTML 中的这段代码绘制两条折线图。如果$scope.data = [[28, 48, 40, 19, 86, 27, 90],[65, 59, 80, 81, 56, 55, 40]];

<canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true"
click="onClick" series="series"></canvas>

我的问题是如何使用json中的'percentage1'和'percentage2'作为数据绘制折线图

Answer 1

var data = [{
    "date":"2009-07-23",
    "numOfTweet":13,
    "oldScore":1,
    "newScore":0,
    "percentage1":-100,
    "appleClosePrice":21.27,
    "percentage2":0
  },
  {
    "date":"2009-07-24",
    "numOfTweet":32,
    "oldScore":2,
    "newScore":0,
    "percentage1":-100,
    "appleClosePrice":21.56,
    "percentage2":68.17113305
  }];

var percentage1 = [], percentage2 = [], output = [percentage1, percentage2];

for (var i = 0; i < data.length; i++) {
    percentage1.push(data[i].percentage1);
    percentage2.push(data[i].percentage2);
}

alert(JSON.stringify(output));

将输出保存到 $scope.data 并使用它

Answer 2

您需要一个函数来迭代所有 JSON 对象并将每个百分比推送到存储在 $scope.data 中的数组中。我定义了 $scope.data = [[], []];

下面的函数应该可以工作：

  $scope.createGraphArray = function() {  
    for (var i = 0; i < $scope.stocks.length; i++) {
      $scope.data[0].push($scope.stocks[i].percentage1)
      $scope.data[1].push($scope.stocks[i].percentage2)
    }
  }

这是一个 Plunker，它在从 JSON:

生成数组后显示 $scope.data 中的数组

Plunker

Answer 3

评论的那行原本有效，但修改后的代码如下 tpie's 在浏览器中没有显示任何内容。有什么问题吗？

app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('stock/aapl.json').success(function(data) {
      $scope.selec = 'aapl'; //default as age
      $scope.series = ['Tweet Mood', 'Stock Market'];
      $scope.stocks = data;
      // $scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    
      $scope.labels = [];
      $scope.createLabels = function() {
        for (var i = 0; i < $scope.stocks.length; i++) {
          $scope.labels.push($scope.stocks[i].date);
        }
      };  
      //   $scope.data = [
      //     [65, 59, 80, 81, 56, 55, 40],
      //     [28, 48, 40, 18, 86, 27, 90]
      //   ];
      $scope.data = [[], []];
      $scope.createGraphArray = function() {  
        for (var i = 0; i < $scope.stocks.length; i++) {
          $scope.data[0].push($scope.stocks[i].percentage1);
          $scope.data[1].push($scope.stocks[i].percentage2);
        }
      };
    });
}]);

来自 Json 操作的数据 AngularJS

Data from Json manipulation in AngularJS

html

javascript

linegraph

angularjs