如何在仪表盘图表中显示标签名称并按名称获取数据

1. 在图表中显示分类名称（对应代码第92行） #

你的代码中barState.labels直接使用了从API获取的categories数组，但这个数组里的元素是对象（每个分类包含name等属性），Chart.js无法直接解析对象作为标签，所以会显示[object Object]。需要提取每个分类的name属性作为标签：

修改代码： #

const barState = {
    // 提取分类名称作为图表标签
    labels: categories.map(cat => cat.name) || [],
    datasets: [
        {
            label: "Products",
            borderColor: '#9333ea',
            backgroundColor: '#9333ea',
            hoverBackgroundColor: '#6b21a8',
            data: categories.map((cat) => products?.filter((item) => item.category === cat.name).length),
        },
    ],
};

额外优化：处理异步加载状态 #

因为分类数据是从API异步获取的，在数据未返回前categories可能为空，建议给图表添加加载状态，避免空数组导致的空白图表：

// 在return里的Bar组件处修改
<div className="bg-white rounded-xl h-auto w-full shadow-lg p-2">
    {categories.length > 0 ? (
        <Bar data={barState} />
    ) : (
        <div className="flex items-center justify-center h-64">
            <span>加载分类数据中...</span>
        </div>
    )}
</div>

2. 按名称获取对应产品数据 #

你当前的代码已经实现了按分类名称统计产品数量的逻辑，但可以优化性能（尤其是产品数量较多时）：

优化方案：预创建分类-产品数量映射 #

先遍历产品列表，统计每个分类的产品数量，再映射到分类数组，减少重复过滤操作：

// 在barState之前添加这段代码
const categoryProductCount = {};
// 统计每个分类的产品数量
products?.forEach(item => {
    if (item.category) {
        categoryProductCount[item.category] = (categoryProductCount[item.category] || 0) + 1;
    }
});

const barState = {
    labels: categories.map(cat => cat.name) || [],
    datasets: [
        {
            label: "Products",
            borderColor: '#9333ea',
            backgroundColor: '#9333ea',
            hoverBackgroundColor: '#6b21a8',
            // 直接从映射中获取数量，避免重复filter
            data: categories.map(cat => categoryProductCount[cat.name] || 0),
        },
    ],
};

注意事项 #

确保产品数据中的item.category字段和分类数据的cat.name完全匹配（包括大小写、空格），如果API返回的分类ID和产品关联的是ID而非名称，需要调整匹配逻辑（比如用cat._id和item.categoryId对比）。

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