Как заполнить charts.js круговая диаграмма с использованием массива json

#javascript #arrays #json #charts #chart.js

#javascript #массивы #json #Диаграммы #chart.js

Вопрос:

Мой массив json выглядит следующим образом

 [{"count":2,"DepartementNom":"Finance"},{"count":1,"DepartementNom":"Technique"}]
  

Как я могу заполнить chart.js круговая диаграмма с использованием этого набора данных?
Я пробовал этот код, но, похоже, с ним где-то возникла проблема.

     var d = {!! json_encode($json_deco) !!};
new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: d,
    options: {
      title: {
        display: true,
        text: "Nombre demployés par departement"
      }
    }
});
  

Ответ №1:

Вы не можете сделать это таким образом. Здесь в документации есть несколько примеров

Один из простых способов задать данные для диаграммы может быть выполнен таким образом:

 data: {
        labels: ['Finance', 'Technique'],
        datasets: [{
            data: [1, 2],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    },
  

Рабочий пример с скрипкой