javascript - 如何使用 Chart.js 在图表上正确显示数据集

Question

我正在 ASP.NET 中开发一个小型仪表板，并借助 C#，我通过正确生成堆叠的水平条形图来提出问题。

我正在使用 chart.js 库

Library chart.js

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

示例图片:

错误:

解释起来有点复杂，我正在按照我在前面的示例中指出的那样绘制预期的水平条形图，但我无法正确看到数据集及其颜色。

到目前为止，我所取得的成就是看到技术人员拥有每个人的票数，但除了 ASIGNADO 我还有其他状态，每个状态的每个数据集都必须用一种颜色表示。

下表是我获取要显示的信息的表格，其中 TK_HD_TICKETS_ID 是已注册的门票和我要获取金额的位置，在 TK_CT_STATUS_ID 存储工单状态，TK_BT_EMPLOYEES_ID 是拥有该工单的技术人员

TK_DT_RECORDS

其中 TK_HD_TICKETS_ID 是已注册的门票，我想在哪里获得金额，在 TK_CT_STATUS_ID 中存储了门票的状态，在 中TK_BT_EMPLOYEES_ID 是拥有该工单的技术人员

以下是目前为止我用来获取数据的查询

DashboardModel.cs

public 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 () {

        }
    });   
}

Answer 1

我希望我理解你的问题和你的数据结构(正如我在对你的问题的评论中所说的)。

将您的数据结构变成 chart.js 所期望的数据结构并非易事。这就是为什么我的代码看起来很难。这就是为什么我在那里放了一些评论，我把所有的 console.logs 放在那里，这样你就可以很容易地看到发生了什么。

如有任何问题，请随时提出。我敢肯定，了解所有内容需要一些时间。

Complete code in the JSBin

let 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 data
for (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 TicketsClassificationTypes
let 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 improved
for (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 peopleData
chartData.labels = Object.keys(peopleData)

// Sort TicketsClassificationType to order from status array; may be improved
for (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,
});