I want to display a bar chart with multiple datasets as shown below,

我想显示一个包含多个数据集的条形图，如下所示，

I'm able to fetch the data as shown below

我可以获取如下所示的数据

But how to convert this JSON array as below code. I need to show the attendance percentage for each shift for the last 7 days.

但是如何将这个JSON数组转换为下面的代码。我需要显示过去7天每班的出勤率。

var barChartDataDaily = {
        labels: [@Html.Raw("'" + String.Join("','", (Model.GetWeeklyData.GroupBy(c => c.FormattedAccessDate).Select(c => c.First().FormattedAccessDate).ToList()))+"'" )],
        datasets: [
            {
                label: "First Shift",
                backgroundColor: "#7F1E5E",
                borderColor: "#7F1E5E",
                borderWidth: 1,
                data: [14, 27, 33, 46, 100, 67, 74]
            },
            {
                label: "Second Shift",
                backgroundColor: "#CE6D28",
                borderColor: "#CE6D28",
                borderWidth: 1,
                data: [14, 27, 33, 46, 100, 67, 74]
            },
            {
                label: "Third Shift",
                backgroundColor: "#005486",
                borderColor: "#005486",
                borderWidth: 1,
                data: [100, 27, 34, 56, 69, 87, 73]
            }
        ]
    };

Appreciate your help with this. Thanks!

感谢你在这方面的帮助。谢谢

================= Edited ==================

=====================已编辑==================

//X-axis labels
var groupname = [@Html.Raw("'" + String.Join("','", (Model.GetWeeklyData.GroupBy(c => c.FormattedAccessDate).Select(c => c.First().FormattedAccessDate).ToList()))+"'" )];
 
//Fetched Array
var data = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.GetWeeklyData.ToList()))

Assume that you are successfully getting the data from the controller with

假设您使用

var data = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.GetWeeklyData.ToList()))

You should group the data with the x-axis as the set of FormattedAccessDate.
In each FormattedAccessDate, there should be the bars for each ShiftName and its value as AttendancePercentage.

您应该将具有x轴的数据分组为FormattedAccessDate的集合。在每个FormattedAccessDate中，应该有每个ShiftName的条形图及其值AttendancePercentage。

For the color settings (backgroundColor and borderColor), you can write the implementation to set the color value by the ShiftName or use the default color provided by the Chart.js via don't provide the values for backgroundColor and borderColor. It is optional.

对于颜色设置（backgroundColor和borderColor），您可以编写实现以通过ShiftName设置颜色值，也可以通过不提供backgroundColor或borderColor的值来使用Chart.js提供的默认颜色。它是可选的。

let labels = [...new Set(data.map(x => x.FormattedAccessDate))];
let datasets = data.reduce(function (acc, cur) {
  let shift = acc.find(x => x.label == cur.ShiftName);
  if (shift == null) {
    let color = '';
    
    switch (cur.ShiftName) {
      case 'First Shift':
        color = '#7F1E5E';
        break;
      case 'Second Shift':
        color = '#CE6D28';
        break;
      case 'Third Shift':
        color = '#005486';
        break;
    }
  
    shift = {
      label: cur.ShiftName,
      data: [cur.AttendancePercentage],
      backgroundColor: color,
      borderColor: color,
      borderWidth: 1
    };
    
    acc.push(shift);
  } else {
    shift.data.push(cur.AttendancePercentage);
  }
  
  return acc;
}, []);

var barChartDataDaily = {
  type: 'bar',
  data: {
    labels: labels,
    datasets: datasets
  }
};

const ctx = document.getElementById('myChart');
new Chart(ctx, barChartDataDaily);

Demo @ StackBlitz

StackBlitz演示

Reference: Vertical Bar Chart

参考：竖线图