Блог

У меня есть ассоциативный массив, и я хочу отобразить его с помощью диаграммы.Библиотека JS.

Мой массив:

 array:4 [▼
  0 => array:3 [▼
    "faculty" => "Information Technology"
    "category" => "ELearning"
    "counter" => 2
  ]
  1 => array:3 [▼
    "faculty" => "Information Technology"
    "category" => "Webex"
    "counter" => 2
  ]
  2 => array:3 [▼
    "faculty" => "Masscom"
    "category" => "ELearning"
    "counter" => 3
  ]
  3 => array:3 [▼
    "faculty" => "Masscom"
    "category" => "Webex"
    "counter" => 3
  ]
]
 

Что я пытаюсь сделать:

Я пытаюсь показать: — Факультеты внизу в виде меток — Для каждого факультета я хочу показать всю категорию и ее счетчик

например:

1) Информационные технологии имеют категорию электронного обучения со значением 2 и имеют категорию Webex со значением 2

2) Masscom имеет категорию электронного обучения со значением 3 и имеет категорию Webex со значением 3

JS-код:

 var faculties = ['Information Technology', 'Masscom'];
var f = document.getElementById("mybarChart");
new Chart(f, {
    type: "bar",
    data: {
       labels: faculties,
       datasets: ....
    },
})
 

По сути, вам понадобится набор данных для каждой из ваших категорий. Для каждого набора данных потребуется ввод данных для каждого факультета.

Используя приведенный ниже код, вы получите диаграмму, которая выглядит следующим образом:

 // this will get distinct faculty and sort
const faculties = [...new Set(data.map(v => v['faculty']))].sort();

// this will get distinct category and sort
const categories = [...new Set(data.map(v => v['category']))].sort();

const datasets = categories.map(category => ({
  label: category,
  data: faculties.map(faculty => {
    const value = data.find(v => v['faculty'] === faculty amp;amp; v['category'] === category);

    return value['counter'];
  })
}));

const canvas = document.getElementById('mybarChart');

new Chart(canvas, {
  type: 'bar',
  data: {
    labels: faculties,
    datasets: datasets
  }
});
 

Я создал jsfiddle, чтобы показать запущенный код.