如何使用React-Chartjs-2在折线图中正确显示数据？

Question

我正在使用react-chartjs-2制作一些图表，我正在尝试制作一个折线图，其中y轴是数字，x轴是日期。我遇到的问题是 y 轴数据未正确绘制。

数据应按日期顺序绘制，但如图所示，x 轴日期顺序是错误的。绘制的数据来自于一个矩阵，具体来说，图中显示的数据是“最近30天”的数据：

[
    {
        "Last 7 days": {
            "Diesel": [
                {
                    "fecha_crea": "2023-12-25",
                    "sum_cant_consumo": 50,
                    "fuel_type": "Diesel"
                }
            ],
            "Gasolina": [
                {
                    "fecha_crea": "2023-12-20",
                    "sum_cant_consumo": 50,
                    "fuel_type": "Gasolina"
                },
                {
                    "fecha_crea": "2023-12-25",
                    "sum_cant_consumo": 100,
                    "fuel_type": "Gasolina"
                }
            ]
        },
        "Last 30 days": {
            "Diesel": [
                {
                    "fecha_crea": "2023-11-25",
                    "sum_cant_consumo": 20,
                    "fuel_type": "Diesel"
                },
                {
                    "fecha_crea": "2023-12-01",
                    "sum_cant_consumo": 160,
                    "fuel_type": "Diesel"
                },
                {
                    "fecha_crea": "2023-12-15",
                    "sum_cant_consumo": 20,
                    "fuel_type": "Diesel"
                },
                {
                    "fecha_crea": "2023-12-25",
                    "sum_cant_consumo": 50,
                    "fuel_type": "Diesel"
                }
            ],
            "Gasolina": [
                {
                    "fecha_crea": "2023-11-25",
                    "sum_cant_consumo": 100,
                    "fuel_type": "Gasolina"
                },
                {
                    "fecha_crea": "2023-12-10",
                    "sum_cant_consumo": 7,
                    "fuel_type": "Gasolina"
                },
                {
                    "fecha_crea": "2023-12-20",
                    "sum_cant_consumo": 50,
                    "fuel_type": "Gasolina"
                },
                {
                    "fecha_crea": "2023-12-25",
                    "sum_cant_consumo": 100,
                    "fuel_type": "Gasolina"
                }
            ]
        }
    }
]

数据被组织在这段代码中：

// Group the data by fuel_type for each "label"
            const transformedData = groupedDataByRangeC.map(({ label, data }) => {
                const groupedData = data.reduce((acc, curr) => {
                    const { fuel_type, ...rest } = curr;

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

                    acc[tipo_combustible].push({ fuel_type, ...rest });
                    return acc;
                }, {});

                // Sort the data arrays for each fuel_type by date
                Object.values(groupedData).forEach((array) => {
                    array.sort((a, b) => new Date(a.fecha_crea) - new Date(b.fecha_crea));
                });

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

图表显示了该代码块中的数据：

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: item.fecha_crea,
                    y: item.sum_cant_consumo,
                })),
                borderColor: predefinedColors[index % predefinedColors.length],
            }));
        }
        return [];
    };

我真的不知道为什么图表不显示基于日期的 x 轴数据，如果数组中的数据按从旧到最新的日期排序。如有任何帮助，我们将不胜感激。

Answer 1

正如 @kikon 注释所示，x 轴数据是字符串，但应该是日期。为了解决我的问题，我刚刚安装了这个 npm 包：'chartjs-adapter-date-fns' 并将其导入到组件中：

import 'chartjs-adapter-date-fns';

并以这种方式设置图表选项：

const chartOptions = {
        scales: {
            x: {
                type: 'time',
                time: {
                    tooltipFormat: 'MMM do',
                    unit: 'day',
                    displayFormats: {
                        day: 'MMM do ',
                        month: 'MMM do ',
                        year: 'MMM do ',
                    },
                },
                ticks: {
                    maxTicksLimit: 15,
                },
                title: {
                    display: true,
                    text: 'Register date',
                },
            },
            y: {
                title: {
                    display: true,
                    text: 'Total Gallons',
                },
            },
        },
    };