如何使用 Chart.js 在堆积条形图中正确显示数据集

我正在开发一个小型仪表板ASP.NET，在 的帮助下，使用Chart.jsC#生成堆叠的水平条形图时遇到问题。

我有一些技术人员的数据，他们被分配了一定数量的票，根据图像对应于Y图表的轴。A, B,C和D代表每个技术人员，从 1 到 4 的数据集代表每个工单的状态。我想在图表中获得的是每个技术人员考虑到他们的状态的票数。我附上了我想要做的示例图片：

错误：

我正在制作如上一个示例中所示的预期水平条形图，但我无法正确查看数据集及其颜色。

到目前为止，我所取得的成就是查看技术人员每个人拥有的票数，但是在图表底部表示状态的数据集ASIGNADO是重复的，此外还有其他状态和每个数据集，即每个状态，它必须用一种颜色表示：

更准确地说，我在这里添加了在文档中找到的示例Stacked barChart.js

表格中的数据结构如下，我从中提取要显示的信息，TK_HD_TICKETS_ID注册的票在哪里，我想从哪里获取数量，TK_CT_STATUS_ID票的状态存储在哪里，在TK_BT_EMPLOYEES_ID你有那个票的技术员是谁

以下是Javascript我要在图中加载数据的函数：

function loadEmployeesChart() {
    document.getElementById("chart-employee").remove();
    let auxCanvasEmployee = document.createElement('canvas');
    auxCanvasEmployee.setAttribute('id', 'chart-employee');
    auxCanvasEmployee.setAttribute('style', 'width: 720px; height: 600px');

    document
        .querySelector('#chartEmployeeContainer')
        .appendChild(auxCanvasEmployee);

    var canvas = document.getElementById("chart-employee");
    var ctx = canvas.getContext("2d");
    var dataEmployee;
    var myNewChart;

    $.ajax({
        url: document.getElementById("employeeChart").value,
        type: "POST",
        dataType: "json",
        data: {
            refreshType: document.getElementById("dataOption").value
        },
        success: function (data) {
            var dataChart = [];
            var label = [];
            var datalabels = [];
            var stacks = []

            for (let idx in data.DashboardTicketList) {
                if (data.DashboardTicketList.hasOwnProperty(idx)) {
                    dataChart.push(data.DashboardTicketList[idx].TicketsCount);
                    label.push(data.DashboardTicketList[idx].TicketsAsignedTo);
                    datalabels.push(data.DashboardTicketList[idx].TicketsClasificationType);                
                }
            }

            var count = false;
            for (let idx in dataChart) {
                if (dataChart[idx] > 0) {
                    count = true;
                    break;
                }
            }

            if (count) {
                document.getElementById('noDataEmployee').style.display = 'none';
            } else {
                document.getElementById('noDataEmployee').style.display = 'block';
            }

            dataEmployee = { 
                labels: label,
                datasets: [{
                    label: datalabels,
                    data: dataChart,
                }],    
            };

            myNewChart = new Chart(ctx, {
                type: 'horizontalBar',           
                data: dataEmployee,
                options: {
                    maintainAspectRatio: false,
                    
                    scales: {
                        xAxes: [{                            
                            stacked: true // this should be set to make the bars stacked
                        }],
                        yAxes: [{
                            stacked: true // this also..
                        }]
                    },
                    legend: {
                        position: 'bottom',
                        padding: 5,
                        labels:
                        {
                            pointStyle: 'circle',
                            usePointStyle: true
                        }
                    }
                },
                
            });
        },
        error: function () { }
    });   
}