通过将 json 数组中的值传递到 angularjs 来绘制条形图

Question

我有一个JSON数组如下

{
      "id": "00000005",
      "Name": "Test5",
      "hours": 7.5,
      "day": 1
    },
    {
      "id": "00000005",
      "Name": "Test5",
      "hours": 2,
      "day": 2
    },
    {
      "id": "00000005",
      "Name": "Test5",
      "hours": 3,
      "day": 3
    },
    {
      "id": "00000005",
      "Name": "Test5",
      "hours": 3,
      "day": 4
    },
    {
      "id": "00000004",
      "Name": "Test4",
      "hours": 1,
      "day": 1
    },
    {
     "id": "00000004",
      "Name": "Test4",
      "hours": 4,
      "day": 2
    },
 {
      "id": "00000004",
      "Name": "Test4",
      "hours": 4,
      "day": 3
    },
    {
      "id": "00000003",
      "Name": "Test3",
      "hours": 7.5,
      "day": 1
    },
    {
     "id": "00000003",
      "Name": "Test3",
      "hours": 6,
      "day": 2
    },
{
      "id": "00000003",
      "Name": "Test3",
      "hours": 4,
      "day": 3
    },
    {
     "id": "00000003",
      "Name": "Test3",
      "hours": 5,
      "day": 4
    }

通过使用上面的 json 数组，我想绘制一个按 ID 和日期分组的条形图。那就是我需要为第 1 天的 id 00000005,00000004,00000003 和第 2 天的 id 00000005,00000004,00000003 和第 3 天的 id 00000005,00000004,00000003 和 id 000000005,00400000000000000000 天绘制图表. 我知道使用 angular-chart.js 和 chart.js 绘制条形图的基本代码。但我不明白我应该如何将我的数组值传递给 $scope.labels 和 $scope.data.

条形图的基本代码

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
})

更新

我把数组按天分组，下面是排列好的数组

"data": {
    "1": [
     {
          "id": "00000005",
          "Name": "Test5",
          "hours": 7.5,
          "day": 1
        },
{
          "id": "00000004",
          "Name": "Test4",
          "hours": 1,
          "day": 1
        },
{
          "id": "00000003",
          "Name": "Test3",
          "hours": 7.5,
          "day": 1
        }
    ],
    "2": [
     {
          "id": "00000005",
          "Name": "Test5",
          "hours": 2,
          "day": 2
        },
{
         "id": "00000004",
          "Name": "Test4",
          "hours": 4,
          "day": 2
        },
{
         "id": "00000003",
          "Name": "Test3",
          "hours": 6,
          "day": 2
        }
    ],
    "3": [
   {
          "id": "00000005",
          "Name": "Test5",
          "hours": 3,
          "day": 3
        },
{
          "id": "00000004",
          "Name": "Test4",
          "hours": 4,
          "day": 3
        },
{
          "id": "00000003",
          "Name": "Test3",
          "hours": 4,
          "day": 3
        },
    ],
"4": [
   {
          "id": "00000005",
          "Name": "Test5",
          "hours": 3,
          "day": 4
        },
{
          "id": "00000003",
          "Name": "Test3",
          "hours": 5,
          "day": 4
        }
    ]
 }
}

现在如何将这些值分配给 $scope.data 和 $scope.labels ？

Answer 1

如果你在基本代码中使用运行应用于你的数据，你想要这样的东西吗（如果我正在报告此数据）：

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
    $scope.labels = ['00000005', '00000004', '00000003'];
    $scope.series = ['Day 1', 'Day 2', 'Day 3', 'Day 4'];

    $scope.data = [
        [7.5, 1, 7.5],
        [2, 4, 6],
        [3, 4, 4],
        [3, ?, 5],
    ];
})

请注意，完全确定您要如何处理缺失数据，您必须在图表中使用 0 或 undefined 的组合。如果您在以这种方式拆分数据时遇到问题，或者这不是您要查找的内容，则需要更多详细信息。

https://plnkr.co/edit/ouHu5R0UbbkxyDfUerru?p=preview

通过将 json 数组中的值传递到 angularjs 来绘制条形图

Drawing a bar chart by passing values from a json array through angularjs

arrays

bar-chart

angularjs

angular-chartist.js