Как создать диаграмму из диктанта?

У меня есть диктант вида:

print(assigned_incidents)  =>

   [
{'name': 'Eda', 'case_type': 'Med'},
{'name': 'Deniz', 'case_type': 'High'},
{'name': 'Alex', 'case_type': 'Med'}
{'name': 'Eda', 'case_type': 'High'}
     ]

Я хочу отобразить его в диаграмме chart.js в виде сложенной гистограммы.

Например, 'eda' имеет 2 средних и 1 высокий регистр:

STACK

var assignedIncidents = new Chart(document.getElementById('assigned_incidents').getContext('2d'), {
    type: 'bar',
    data: {
        labels: assigned_incidents-->name,
        datasets:assigned_incidents-->case_type
}'
    options: {
         plugins: {

        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
    },
    responsive: true
}
});

Как я могу это сделать?

Игнорируя часть python, приведенный ниже исполняемый код иллюстрирует, как это можно сделать с помощью JavaScript.

const assigned_incidents = [
  {'name': 'Eda', 'case_type': 'Med'},
  {'name': 'Deniz', 'case_type': 'High'},
  {'name': 'Alex', 'case_type': 'Med'},
  {'name': 'Eda', 'case_type': 'High'}
];
const names = [...new Set(assigned_incidents.map(o => o.name))];
const caseTypes = [...new Set(assigned_incidents.map(o => o.case_type))];

new Chart('assigned_incidents', {
  type: 'bar',
  data: {
    labels: names,
    datasets: caseTypes.map(t => ({
      label: t,
      data: names.map(n => assigned_incidents.find(o => o.name == n && o.case_type == t) ? 1 : 0),
      backgroundColor: t == 'Med' ? 'rgb(83, 153, 217)' : 'rgb(128, 27, 128)'
    }))
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: ctx => ctx.dataset.label
        }
      }
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true,        
        ticks: {
          display: false,
          stepSize: 1,
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="assigned_incidents" height="95"></canvas>

Вернуться на верх