使用React-Chartjs-2时折线图日期轴数据展示异常如何解决？

DevOps 小满

2026-7-15

问题分析与解决方案

1. 修复数据处理中的变量名错误

你的数据处理代码存在笔误，acc[tipo_combustible].push应该替换为acc[fuel_type].push，否则分组逻辑会失效，导致数据无法正确归类到对应燃料类型，后续的排序操作也会失去意义。

修正后的数据处理代码：

const transformedData = groupedDataByRangeC.map(({ label, data }) => {
    const groupedData = data.reduce((acc, curr) => {
        const { fuel_type, ...rest } = curr;

        if (!acc[fuel_type]) {
            acc[fuel_type] = [];
        }

        // 修正变量名错误，使用当前项的fuel_type作为键
        acc[fuel_type].push({ fuel_type, ...rest });
        return acc;
    }, {});

    // 按日期从旧到新排序每个燃料类型的数据
    Object.values(groupedData).forEach((array) => {
        array.sort((a, b) => new Date(a.fecha_crea) - new Date(b.fecha_crea));
    });

    return {
        [label]: groupedData
    };
});

2. 配置Chart.js X轴为时间类型

默认情况下，Chart.js会把字符串格式的日期当作普通类别处理，不会自动按时间顺序排列。你需要在图表配置中明确将X轴设置为时间类型，并注册对应的时间轴组件。

首先注册所需的Chart.js组件，然后添加X轴配置：

import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, TimeScale } from 'chart.js';

// 必须注册TimeScale才能使用时间轴
ChartJS.register(
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
    TimeScale
);

// 图表配置项
const chartOptions = {
    scales: {
        x: {
            type: 'time', // 核心：将X轴设置为时间类型
            time: {
                unit: 'day', // 根据数据粒度设置单位
                parser: 'YYYY-MM-DD', // 指定日期解析格式，匹配你的fecha_crea字段
                displayFormats: {
                    day: 'YYYY-MM-DD' // X轴标签显示的日期格式
                },
                tooltipFormat: 'YYYY-MM-DD' // 提示框中显示的日期格式
            },
            title: {
                display: true,
                text: '日期'
            }
        },
        y: {
            title: {
                display: true,
                text: '消耗量'
            }
        }
    }
};

// 组件渲染示例
const FuelConsumptionChart = () => {
    const chartData = {
        datasets: getLineChartData()
    };

    return <Line data={chartData} options={chartOptions} />;
};

3. 可选：将X值转换为Date对象

如果仍存在解析问题，可以将fecha_crea字符串直接转换为Date对象，确保Chart.js能准确识别时间：

const getLineChartData = () => {
    const selectedDataObject = transformData.find((data) => data[selectedData]);
    if (selectedDataObject) {
        return Object.entries(selectedDataObject[selectedData]).map(([fuel_type, data], index) => ({
            label: fuel_type,
            data: data.map((item) => ({
                x: new Date(item.fecha_crea), // 转换为Date对象
                y: item.sum_cant_consumo,
            })),
            borderColor: predefinedColors[index % predefinedColors.length],
        }));
    }
    return [];
};

验证步骤

先确认变量名错误已修复，检查分组后的数据每个燃料类型数组是否按日期从旧到新排序。
确认TimeScale已注册且X轴配置为时间类型，这是让图表按时间顺序排列的核心。
测试图表是否正常展示有序的日期轴。

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