使用react-chartjs-2绘制折线图时线条不显示的问题排查

你的问题核心是折线未渲染，但Y轴和图例正常，主要有两个关键修复点：

1. 显式设置折线宽度（borderWidth） #

默认情况下，Chart.js的线条宽度可能为0，导致折线不可见。需要在每个数据集里添加borderWidth属性：

修改后的数据集代码：

const data = {
    labels: dataFromDb.map(item => item.period),
    datasets: [
        {
            data: dataFromDb,
            backgroundColor: '#FAA46A',
            borderColor: '#FAA46A',
            label: i18n.sellPrice,
            parsing: { yAxisKey: 'price_so' },
            borderWidth: 2, // 新增：设置折线宽度
            pointRadius: 3, // 可选：显示数据点，方便调试
        },
        {
            data: dataFromDb,
            backgroundColor: '#1DCF35',
            borderColor: '#1DCF35',
            label: i18n.purchasePrice,
            parsing: { yAxisKey: 'price_po' },
            borderWidth: 2, // 新增：设置折线宽度
            pointRadius: 3, // 可选：显示数据点
        },
    ],
};

2. （可选）直接处理数据为数值数组，避免parsing潜在问题 #

如果不想依赖parsing配置，可以直接将每个数据集的data处理为对应数值的数组，这样更直观且不易出错：

const data = {
    labels: dataFromDb.map(item => item.period),
    datasets: [
        {
            data: dataFromDb.map(item => item.price_so), // 直接映射y值数组
            backgroundColor: '#FAA46A',
            borderColor: '#FAA46A',
            label: i18n.sellPrice,
            borderWidth: 2,
            pointRadius: 3,
        },
        {
            data: dataFromDb.map(item => item.price_po), // 直接映射y值数组
            backgroundColor: '#1DCF35',
            borderColor: '#1DCF35',
            label: i18n.purchasePrice,
            borderWidth: 2,
            pointRadius: 3,
        },
    ],
};

额外验证点 #

如果修改后仍有问题，可以检查：

• 确认dataFromDb中的price_so和price_po都是有效的数值（无undefined或null）
• 检查x轴labels的长度与数据集data的长度是否完全一致

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