Chart.js接入数据库数组时自定义数据结构的配置方法咨询

开发者阿泽

2026-10-2

问题根因

你当前写法的核心问题是结构化数据的格式不符合Chart.js的要求：

你现在的datasets[0].data数组里仅包含1个对象，且把完整的catName、numPostPerCat两个数组直接作为属性值传入
Chart.js的对象格式数据要求数组内每一个对象对应一条独立的条形数据，即每个对象里存单个分类名称 + 对应的单个数值，而不是把整个分类数组、数值数组塞进同一个对象里。

解决方法

先将两个独立的数组合并为符合要求的结构化数据数组，再传入配置即可：

步骤1：合并数组生成结构化数据

// 遍历分类名称数组，按索引匹配对应的数值，组装成要求的对象结构
const structuredData = catName.map((cat, index) => ({
  Terris: cat,
  cuantos: {
    cantidad: numPostPerCat[index]
  }
}))

步骤2：替换原有datasets的data属性

const data2= {
  datasets: [{
    label: 'Terri',
    backgroundColor: 'rgb(166,166,166)',
    borderColor: 'rgb(166,166,166)',
    data: structuredData, // 替换为生成的结构化数据
    borderWidth: 2,
    barThickness: 3,
    datalabels: {
      color:'gray',
      anchor: 'end',
      align: 'top',
    },
  }]
};