折线图Js x轴值在React上全为0

Question

我正在尝试通过图表 js 在 React 上实现折线图，但是，每当我的函数设置 x 和 y 轴数据时，它都会返回一个垂直的折线图，x 轴值为 0。

下面是我的代码：

import React, { useEffect, useState } from 'react'
import './LineGraph.css'
import {Line} from "react-chartjs-2"

function LineGraph() {

    const [ graphData, setGraphData ] = useState([])
    const data = [{x:10, y:20}, {x:15, y:10}, {x:12, y:4}]

    const createMockData = () => {
        let data = [];
        let value = 50;
        for(var i = 1; i < 366; i++) {
            let date = new Date()
            date.setHours(0,0,0,0)
            date.setDate(i)
            value += Math.round((Math.random() < 0.5 ? 1 : 0) * Math.random() * 10)
            data.push({x: value, y:value})
            console.log(data)
        }
        setGraphData(data) 
    }
        
    useEffect(()=> {
        createMockData()
    }, [])
 
    return (
        <div className="linegraph">
            <Line 
                data={{

                    datasets: [
                        {
                            type: "line",
                            data: graphData,
                            backgroundColor: "black",
                            borderColor: "#5AC53B",
                            borderWidth: 2,
                            pointBorderColor: 'rgba(22, 22, 22, 0)',
                            pointBackgroundColor: 'rgba(0,0,0,0)',
                            pointHoverBackgroundColor: '#5AC53B',
                            pointHoverBorderColor: '#000000',
                            pointHoverBorderWidth: 4,
                            pointHoverRadius: 6,
                        }
                    ]
                }}

                options={{
                    
                    plugins:{
                        legend: {
                            display: false
                        },
                        tooltips: {
                            interaction: {
                                mode: "index",
                                intersect: false    
                            }
                        }
                    },
                    scales: {
                        x: [
                            {
                                type: "time",
                                time: {
                                    format: "MM/DD/YY",
                                    tooltipFormat: "ll",
                                },
                                ticks: {
                                    display: false,
                                }
                            },
                        ],
                        y: {
                            ticks: {
                                display: false
                            }
                        }
                    }
                     
                }}   
            />
        </div>
    )
}
 
export default LineGraph

我正在使用 react-charts-2，最新版本 3.5.1。我认为主要问题出在我的 x 轴上，因为我的 y 坐标都显示出来了，这就是为什么这条线是垂直的，但是，所有 x 值都是 0，所以它们不是对角线或相关 uphill/downhill 线.请帮我解决这个问题

Answer 1

您将 x 轴刻度定义为数组，这是 v2 语法。所有尺度都必须定义为一个对象。所以目前 chart.js 将您的比例视为类别比例而不是时间比例，并且它无法将数字输入作为标签处理。

要解决此问题，您需要像这样更改比例：

scales: {
  x: {
    type: "time",
    time: {
      format: "MM/DD/YY",
      tooltipFormat: "ll",
    },
    ticks: {
      display: false,
    }
  },
  ,
}

要使用时间刻度，您还需要一个日期适配器，因为您使用的是 js 日期，所以您可以像这样使用普通的 datefns 适配器：

npm install date-fns chartjs-adapter-date-fns --save

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

折线图Js x轴值在React上全为0

Line Chart Js x-axis values all 0 on React

reactjs

chart.js