Chart.js雷达图如何正确传入动态长度数组的多个labels？

问题根源 #

你当前写法的核心错误是在给labels配置赋值时，额外套了一层方括号：

labels: [labels]

此时实际传入配置的是二维嵌套数组（结构为[ [问题1, 问题2, 问题3...] ]），但Chart.js的labels配置要求必须接收一维的字符串/数值数组，因此会把内层的整个数组识别为一个独立标签，自然没法正常展示所有维度。

正确实现方式 #

基础写法（直接传入已生成的一维标签数组） #

不需要对已经是一维结构的标签数组做额外包装，直接赋值即可：

// 不管是循环生成的标签，还是从Excel解析得到的问题名数组，都是一维结构
var DATA_COUNT = 6;
var labels = [];
for (var i = 0; i < DATA_COUNT; ++i) {
  // 替换为你实际从Excel读取的问卷问题名称即可
  labels.push('问卷问题' + i);
}

var config = {
  type: 'radar',
  data: {
    // 直接把labels变量赋值给配置项，不要额外加[]
    labels: labels,
    // 支持ES6语法时还可以简写为 labels, （键名和变量名相同时可省略）
    datasets: [{
      label: 'Dato',
      borderColor: "rgba(0, 0, 255, 0)",
      backgroundColor: "rgba(0, 0, 255, 0)",
      pointBackgroundColor: "rgba(255, 255, 255, 0)"
    }]
  }
}

适配动态长度的Excel问卷数据场景 #

Chart.js的labels配置本身原生支持任意长度的一维数组，不需要提前固定数组长度：

• 直接把从Excel解析得到的全量问题名数组（比如解析后得到的questionNameList）赋值给labels即可，雷达图会自动根据数组长度生成对应数量的坐标轴维度
• 如果解析得到的Excel数据存在嵌套结构、空值，可以先做一次简单处理再传入，避免出现无效标签：

  // 拍平嵌套数组、过滤空字符串后再传入配置
  const validLabels = questionNameList.flat(Infinity).filter(item => item?.trim() !== '')
  config.data.labels = validLabels
  

常见误区提醒 #

• 不要对已经是一维结构的标签数组做嵌套包装，额外加[]是这类问题最常见的触发原因
• 传入的labels数组长度需要和每个datasets里的data数组长度保持一致，否则会出现维度错位

内容的提问来源于stack exchange，提问作者MIGUEL ANGEL ROJAS HENAO