1

我有一个 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 和 day 分组的条形图。那就是我需要为第 1 天的 id 00000005,00000004,00000003 和第 2 天的 id 00000005,00000004,00000003 和第 3 天的 id 00000005,00000004,00000003 和第 3 天的 id 00000000004,00000000000004 000004 绘制图表. 我知道使用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 ？

4

1 回答 1

0

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

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

于 2019-07-11T16:12:28.127 回答