如何解决Chart.js缺失情感数据引发的TypeError并显示0值？

方法一：前端补全缺失的情感计数（推荐新手优先尝试） #

1. 先定义好完整的7种情感列表，固定顺序和你图表要展示的一致：

const allEmotions = ['angry','disgusted','fearful','happy','neutral','sad','surprised'];

2. 把AJAX返回的数据转成键值对对象，方便快速查找对应情感的计数：
   假设AJAX返回的数据是类似 [{emotion: 'happy', CountOf: 5}, {emotion: 'angry', CountOf: 2}] 的数组，转成对象：

// 假设ajaxData是你AJAX获取到的原始数据
const emotionCounts = {};
ajaxData.forEach(item => {
  emotionCounts[item.emotion] = item.CountOf;
});

3. 遍历完整情感列表，自动补全缺失情感的计数为0：

const counts = allEmotions.map(emotion => {
  // 有数据就用数据库返回的CountOf，没有就返回0
  return emotionCounts[emotion] || 0;
});

4. 最后把这个counts数组传给你的generategraph函数即可，不用再按索引直接读取原始AJAX数据。

方法二：从SQL查询层面直接返回所有情感的计数（适合有SQL基础的用户） #

如果不想在前端处理，也可以修改SQL语句，让数据库直接返回7种情感的计数，缺失的自动补0。

假设你的表名为face_emotions，userid字段是user_id，情感字段是emotion，可以用LEFT JOIN关联包含所有情感的临时表：

SELECT 
  e.emotion, 
  COUNT(f.emotion) AS CountOf
FROM 
  (SELECT 'angry' AS emotion UNION ALL
   SELECT 'disgusted' UNION ALL
   SELECT 'fearful' UNION ALL
   SELECT 'happy' UNION ALL
   SELECT 'neutral' UNION ALL
   SELECT 'sad' UNION ALL
   SELECT 'surprised') AS e
LEFT JOIN face_emotions AS f 
  ON e.emotion = f.emotion AND f.user_id = '你的目标userid'
GROUP BY e.emotion
ORDER BY 
  CASE e.emotion
    WHEN 'angry' THEN 1
    WHEN 'disgusted' THEN 2
    WHEN 'fearful' THEN 3
    WHEN 'happy' THEN 4
    WHEN 'neutral' THEN 5
    WHEN 'sad' THEN 6
    WHEN 'surprised' THEN 7
  END;

这样查询结果会包含所有7种情感，无数据的情感CountOf自动为0，前端直接拿数据使用即可，无需额外处理缺失值。

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