我正在使用react和chart js来显示来自rest调用的数据。数据是以我想要的方式来的，但是当把它放入chart js时，我得到了1行看起来不错的数据，但是另一个在图表上来回的zig zagging线。标签也没有按照正确的顺序显示。它们需要按照时间顺序。我已经把我以前的尝试注解掉了。如何使标签以正确的顺序显示，并使两行将数据点显示到其相应的标签？
图表截图：

import React, { useState, useMemo } from "react"

import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Tooltip,
Legend,
TimeScale
} from 'chart.js';

import { Line } from 'react-chartjs-2';
import 'chartjs-adapter-date-fns';


export const PlayerImprovementChart = (props) => {

const [labels, setLabels] = useState([]);
const [redScores] = useState([]);
const [whiteScores] = useState([]);

const [data] = useState({
    datasets: [
        {
            label: 'Red Pad',
            data: redScores,
            borderColor: 'rgb(255, 99, 132)',
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
        },
        {
            label: 'White Pad',
            data: whiteScores,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgba(255, 255, 255, .5)',
        },
    ],
})

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Tooltip,
    Legend,
    TimeScale
);

const options = {
    animation: false,
    responsive: true,
    plugins: {
        legend: {
            position: 'top',
            labels: {
                color: 'white'
            },
        },
    },
    scales: {
        y: {
            ticks: { color: 'white' },
        },
        x: {
            ticks: { color: 'white' },
            scaleLabel: {
                display: true,
                labelString: 'Date',
            },
            // type: 'time',
            // time: {
            //     parser: 'yyyy-MM-ddHH:mm:ss.SSS+SS:SS',
            //     unit: 'day',
            //     displayFormats: {
            //         day: 'MM-dd-yyyy'
            //     }
            // }
        },
    },
    parsing: {
        xAxisKey: 'date',
        yAxisKey: 'score'
    }
};

function clearArray(array) {
    if(array != null) {
        if(typeof array === Object) {
            array = null;
        } else {
            while (array.length > 0) {
                array.pop();
            }
        }
    }
}

//set the chart dates 
useMemo(() => {
    //clear arrays on reload
    clearArray(redScores);
    clearArray(whiteScores);

    if (props.redScores != null) {
        if (Object.keys(props.redScores).length > 0) {
            Object.keys(props.redScores).forEach(function (date) {
                if (props.redScores[date] !== 999 && props.redScores[date] !== 0) {
                    let score = props.redScores[date];
                    redScores.push({ date, score });
                }
            });
        }
    }

    if (props.whiteScores != null) {
        if (Object.keys(props.whiteScores).length > 0) {
            Object.keys(props.whiteScores).forEach(function (date) {
                if (props.whiteScores[date] !== 999 && props.whiteScores[date] !== 0) {
                    let score = props.whiteScores[date];
                    whiteScores.push({ date, score });
                }
            });
        }
    }

}, [props.dates, props.dateTo, props.dateFrom, props.redScores, props.whiteScores, labels, redScores, whiteScores]);

return (
    <div className="container">
        <Line options={options} data={data} />
    </div>
)
};

export default PlayerImprovementChart;

**编辑：**红色分数：

白色得分：