Рисование гистограммы путем передачи значений из массива json через angularjs - PullRequest
Новая
       22

Рисование гистограммы путем передачи значений из массива json через angularjs

1 голос
/ 11 июля 2019

У меня есть массив 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 и дню.То есть мне нужно, чтобы график рисовался для идентификатора 00000005,00000004,00000003 в день 1 и идентификатора 00000005,00000004,00000003 в день 2 и идентификатора 00000005,00000004,00000003 в день 3 и идентификатора 00000005,00000004,00000003 в день 4Я знаю базовый код для рисования гистограммы, используя 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?

1 Ответ

0 голосов
/ 11 июля 2019

Если вы пробуете базовый код, примененный к вашим данным, хотите ли вы что-то вроде этого (если бы я сообщал об этих данных): 

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 или неопределенной в таблице.Если у вас есть проблемы с разделением данных таким образом, или это не то, что вам нужно, потребуется более подробная информация.

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

...