Ng2-Chart如何将JSON考勤数据赋值给DataSet并正确渲染柱状图

• 数据集格式错误：ng2-charts的柱状图中，每个对比分类（此处为教师、学生）对应独立的dataset对象，你当前把所有类型的考勤数据都塞到了同一个dataset里，只会渲染1组柱子
• 横轴标签格式错误：visitSaleChartLabels要求是一维字符串数组，你对map返回的数组额外套了一层[]，变成了二维数组，导致所有日期被识别为同一个刻度的内容，堆叠在一起

先对接口返回的原始数据做结构化整理：先提取去重后的日期列表作为横轴标签，再分别组装教师、学生两个数据集，每个数据集的data数组按日期顺序存放对应考勤人数，修正后的代码如下：

LoadLastFour() {
  this.dataservice.GetLastFour().subscribe(result => {
    this.lastFour = JSON.parse(result);
    
    // 提取去重后的日期作为横轴标签，split('T')[0]可去掉日期后的时间后缀，显示更友好
    const dateSet = new Set(this.lastFour.map(item => item.date.split('T')[0]));
    this.visitSaleChartLabels = Array.from(dateSet);

    // 按日期顺序分别组装教师、学生的考勤数据
    const teacherData = [];
    const studentData = [];
    this.visitSaleChartLabels.forEach(date => {
      // 匹配当前日期的教师考勤数
      const teacherItem = this.lastFour.find(item => item.date.startsWith(date) && item.type === 'Teacher');
      teacherData.push(teacherItem ? teacherItem.total : 0);
      // 匹配当前日期的学生考勤数
      const studentItem = this.lastFour.find(item => item.date.startsWith(date) && item.type === 'Student');
      studentData.push(studentItem ? studentItem.total : 0);
    })

    // 组装符合ng2-charts要求的数据集
    this.visitSaleChartData = [
      {
        label: '教师',
        data: teacherData,
        borderWidth: 1,
        fill: false,
      },
      {
        label: '学生',
        data: studentData,
        borderWidth: 1,
        fill: false,
      }
    ];
  }, error => console.error(error)); 
}

若需要确保柱子并排而非堆叠，可检查图表配置visitSaleChartOptions中scales.x.stacked设置为false即可，默认值即为false，无特殊修改不需要额外调整。

内容的提问来源于stack exchange，提问作者user8512043