我正在C＃的帮助下在ASP.NET中开发一个小型仪表板，并且通过正确生成堆叠的水平条形图来提出问题。我正在使用chart.js库Library chart.js附上我想做的事的示例图像，我有一些被分配了一定数量工单的技术人员的数据，根据这些图像，它们对应于图A，B，C，D的Y轴，代表每个技术人员以及它们代表状态的数据集，我想在图中获得的是每个技术人员针对其状态所拥有的凭单数量。示例图片：错误：Kinda解释起来很复杂，正如我在前面的示例中所指出的，我正在按照预期的水平条形图进行绘制，但是我无法正确看到数据集及其颜色。到目前为止，我已经获得的成就是看到技术人员以及每个人拥有的票证数量，但是重复了我用图底部的状态表示的数据集，除了ASIGNADO之外，我还有其他状态和每个数据集即每个状态都必须用颜色表示。下表是获取要显示的信息的表，其中TK_HD_TICKETS_ID是已注册的票证，我想获取金额，在TK_CT_STATUS_ID中存储票证的状态，在是拥有该票证的技术员TK_DT_RECORDSTK_BT_EMPLOYEES_ID是已注册的凭单，我想在哪里获取金额，TK_HD_TICKETS_ID是存储凭单状态的位置，TK_CT_STATUS_ID是拥有该凭单的技术人员以下是到目前为止我正在获取数据的查询DashboardModel.cspublic class DashboardResult : Result { public List<TicketsDashboardAux> DashboardTicketList { set; get; } /// <summary> /// Object with the results for the reports /// </summary> public DashboardResult() { DashboardTicketList = new List<TicketsDashboardAux>(); } } /// <summary> /// Auxiliary Object to obtain the consultation for the basic report /// </summary> public class TicketsDashboardAux { public string TicketsAsignedTo { set; get; } public int TicketsCount { set; get; } public string TicketsClasificationType { set; get; } } public class DashboardModel { /// <summary> /// Query for ticket board by employee status /// </summary> /// <param name="refreshType"></param> /// <param name="area"></param> /// <returns></returns> public static DashboardResult GetEmployeeByStatus(string refreshType, string area) { var result = new DashboardResult(); using (var db = new dbGoldenTicket()) { var subQuery = from tblTickets in db.TK_HD_TICKETS join tblRecords in db.TK_DT_RECORDS on tblTickets.TK_HD_TICKETS_ID equals tblRecords .TK_HD_TICKETS_ID join tblStatus in db.TK_CT_STATUS on tblRecords.TK_CT_STATUS_ID equals tblStatus. TK_CT_STATUS_ID join tblEmployee in db.TK_BT_EMPLOYEES on tblRecords.TK_BT_EMPLOYEES_ID equals tblEmployee .TK_BT_EMPLOYEES_ID into tempEmplo from tblEmployee in tempEmplo.DefaultIfEmpty() where crationDateTickets.Contains(tblTickets.TK_HD_TICKETS_ID) && tblRecords.TK_DT_RECORDS_ID == ( from tblTicketAux in db.TK_HD_TICKETS join tblRecordAux in db.TK_DT_RECORDS on tblTicketAux.TK_HD_TICKETS_ID equals tblRecordAux .TK_HD_TICKETS_ID where tblTickets.TK_HD_TICKETS_ID == tblTicketAux.TK_HD_TICKETS_ID select tblRecordAux.TK_DT_RECORDS_ID ).Max() select new { tblRecords.TK_HD_TICKETS_ID, tblEmployee.FULLNAME, tblStatus.NAME, }; var queryTicketsList = (from subquery in subQuery group subquery by new { subquery.FULLNAME, subquery.NAME } into grp select new TicketsDashboardAux() { TicketsAsignedTo = grp.Key.FULLNAME, TicketsClasificationType = grp.Key.NAME, TicketsCount = grp.Count() }).ToList(); foreach (TicketsDashboardAux rowAux in queryTicketsList) { rowAux.TicketsAsignedTo = rowAux.TicketsAsignedTo.IsEmpty() ? "Sin asignar" : rowAux.TicketsAsignedTo; result.DashboardTicketList.Add(rowAux); } result.Success = true; result.Message = "op_exitosa"; } return result; }以下是我将使用该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 () { } });} (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 我希望我理解您的问题和您的数据结构（正如我在对您的问题的评论中所说的那样）。将您的数据结构带到一个chart.js并不是一件容易的事。这就是为什么我的代码看起来非常困难的原因。这就是为什么我在其中添加一些评论，然后将所有console.logs放入其中的原因，因此您可以轻松地看到正在发生的事情。随时问您任何问题。我相信花些时间才能理解所有内容。Complete code in the JSBinlet canvas = document.getElementById("chart");let ctx = canvas.getContext("2d");let data = {}data.DashboardTicketList = { 0: { TicketsAssignedTo: 'Tim', TicketsClassificationType: 'TERMINADO', TicketsCount: 1, }, 1: { TicketsAssignedTo: 'Tim', TicketsClassificationType: 'ASIGNADO', TicketsCount: 7 }, 2: { TicketsAssignedTo: 'Tim', TicketsClassificationType: 'CERRADO', TicketsCount: 5 }, 3: { TicketsAssignedTo: 'Melanie', TicketsClassificationType: 'ASIGNADO', TicketsCount: 7 }, 4: { TicketsAssignedTo: 'Melanie', TicketsClassificationType: 'CERRADO', TicketsCount: 7 }, 5: { TicketsAssignedTo: 'Steffen', TicketsClassificationType: 'TERMINADO', TicketsCount: 0 }, 6: { TicketsAssignedTo: 'Steffen', TicketsClassificationType: 'ASIGNADO', TicketsCount: 10 }, 7: { TicketsAssignedTo: 'Steffen', TicketsClassificationType: 'CERRADO', TicketsCount: 7 }, 8: { TicketsAssignedTo: 'Talia', TicketsClassificationType: 'TERMINADO', TicketsCount: 5 }, 9: { TicketsAssignedTo: 'Talia', TicketsClassificationType: 'ASIGNADO', TicketsCount: 7 }, 10: { TicketsAssignedTo: 'Talia', TicketsClassificationType: 'EN ESPERA USUARIO', TicketsCount: 6 }}const status = [ 'ABIERTO', 'ASIGNADO', 'EN PROCESO', 'EN ESPERA USUARIO', 'TERMINADO', 'CERRADO']const colors = { 'ASIGNADO': '#F7A65C', 'ABIERTO': '#F76363', 'CERRADO': '#6CE5CE', 'TERMINADO': '#4285f4', 'EN PROCESO': '#F2CB5F', 'EN ESPERA USUARIO': '#B283ED'}let peopleData = {}let classificationData = {}let chartData = { labels: [], datasets: []}// loop through complete datafor (let idx in data.DashboardTicketList) { let cData = data.DashboardTicketList[idx] //console.log(cData) // change data structure to all people if (!peopleData.hasOwnProperty(cData.TicketsAssignedTo)) { peopleData[cData.TicketsAssignedTo] = {} } peopleData[cData.TicketsAssignedTo][cData.TicketsClassificationType] = cData.TicketsCount // Get all different TicketsClassificationTypes (object to eliminate duplicates) if (!classificationData.hasOwnProperty(cData.TicketsClassificationType)) { classificationData[cData.TicketsClassificationType] = true }}// Get array of all different TicketsClassificationTypeslet classificationDataArray = Object.keys(classificationData)//console.log('classData', classificationData)//console.log('classDataArray', classificationDataArray)//console.log('peopleData', peopleData)// Assign 0 to all people with no specific TicketsClassificationType; may be improvedfor (let idx in peopleData) { let cPerson = peopleData[idx] for (let i = 0; i < classificationDataArray.length; i++) { if (!cPerson.hasOwnProperty(classificationDataArray[i])) { cPerson[classificationDataArray[i]] = 0 } }}// Get chart labels from peopleDatachartData.labels = Object.keys(peopleData)// Sort TicketsClassificationType to order from status array; may be improvedfor (let i = 0; i < status.length; i++) { for (let j = 0; j < classificationDataArray.length; j++) { if (status[i] === classificationDataArray[j]) { let cClass = classificationDataArray[j] //console.log('cClass', cClass) let cData = [] for (let idx2 in peopleData) { //console.log('peopleData[idx2]', peopleData[idx2]) cData.push(peopleData[idx2][cClass]) } chartData.datasets.push({ label: cClass, data: cData, backgroundColor: colors[cClass] }) break } }}/*let 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';}*/let options = { responsive: true, //maintainAspectRatio: false, scales: { xAxes: [{ stacked: true, ticks: { beginAtZero: true } }], yAxes: [{ stacked: true, ticks: { beginAtZero: true } }] }, legend: { position: 'bottom', padding: 5, labels: { pointStyle: 'circle', usePointStyle: true } }}let myNewChart = new Chart(ctx, { type: 'horizontalBar', data: chartData, options: options,});关于javascript - 如何使用Chart.js在图表上正确显示数据集，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58125571/ (adsbygoogle = window.adsbygoogle || []).push({});