Создать гистограмму, используя chart.js и ассоциативный массив - PullRequest
Новая
       15

Создать гистограмму, используя chart.js и ассоциативный массив

0 голосов
/ 13 апреля 2019

У меня есть ассоциативный массив, и я хочу отобразить его с помощью библиотеки Chart.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) Информационные технологии имеет категорию ELearning со значением 2 и имеет категорию Webex со значением 2

2) Masscom имеет категорию ELearning со значением 3 и имеет категорию Webex со значением 3

JS код: 

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

1 Ответ

1 голос
/ 14 апреля 2019

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

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

chart from JS fiddle code

// 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 && v['category'] === category);

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

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

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

Я создал jsfiddle, чтобы показывал код, работающий .

...