为图表值输入

时间:2018-02-06 18:55:20

标签: javascript angularjs json

我有这个JSON,并希望保留每个糖果的类型和颜色的运行选项卡,并使用zingcharts将其显示在饼图中。

[
    {
        "name": "Dog",
        "color": "Blue"
    },
    {
        "name": "Dog",
        "color": "Blue"
    },
    {
        "name": "Cat",
        "color": "Yellow"
    }

我的JSON来自HTTP get请求。我似乎无法让我的图表识别blueDogyellowCat的整数值。我是否正确检查每个属性的值?

我尝试按照example进行操作,但没有取得预期效果。

      var sortedAnimals= [];
      var blueDog = 0;
      var yellowCat = 0;
      $http.get('/sorted-animals').then(function (response) {
                  $scope.sortedAnimals= response.data;
                  for (var i = 0; i < sortedAnimals.length; i++) {
                       sortedAnimals[i] = sortedAnimals[i];
                       if (sortedAnimals[i].name == "dog" && sortedAnimals[i].color == "blue") {
                            blueDog++;
                       }
                       if (sortedAnimals[i].name == "cat" && sortedAnimals[i].color == "yellow") {
                                yellowCat++;
                       }
                  }
                    $scope.myJson = {
                      type: "pie",
                      title: {
                        textAlign: 'center',
                        text: "My title"
                      },
                      plot: {
                        slice: 50 //to make a donut
                      },
                      series: [{
                        values: [blueDog]
                      },
                      series: [{
                        values: [yellowCat]
                      }]
                    };


            },
                  function (error) {
                       console.log(error);
             });

2 个答案:

答案 0 :(得分:2)

查看你的for循环 -

for (var i = 0; i < sortedAnimals.length; i++) {
                   sortedAnimals[i] = sortedAnimals[i];
                   if (sortedAnimals[i].name == "dog" && sortedAnimals[i].color == "blue") {
                        blueDog++;
                   }
                   if (sortedAnimals[i].name == "cat" && sortedAnimals[i].color == "yellow") {
                            yellowCat++;
                   }
}

应该是

for (var i = 0; i < $scope.sortedAnimals.length; i++) {
              //I got rid of an unnecessary line here
               if ($scope.sortedAnimals[i].name == "dog" && $scope.sortedAnimals[i].color == "blue") {
                    blueDog++;
               }
               if ($scope.sortedAnimals[i].name == "cat" && $scope.sortedAnimals[i].color == "yellow") {
                        yellowCat++;
               }
}

你基本上只是放弃了$ scope,但需要保留它。

如果您希望sortedAnimals不在$ scope上,则需要指定为:

var sortedAnimals = $scope.sortedAnimals

答案 1 :(得分:1)

尝试将sortedAnimals更改为$scope.sortedAnimals

$scope.sortedAnimals = response.data;
for (var i = 0; i < $scope.sortedAnimals.length; i++) {
  if ($scope.sortedAnimals[i].name == "dog" && $scope.sortedAnimals[i].color == "blue") {
    blueDog++;
  }
  if ($scope.sortedAnimals[i].name == "cat" && $scope.sortedAnimals[i].color == "yellow") {
    yellowCat++;
  }
}