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

Question

我试图通过react上的chart js实现折线图，然而，每当我的函数设置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轴,因为我的坐标出现,这就是为什么线是垂直的,然而,所有的x值是0,所以他们不是对角线或相关上坡下坡线。请帮我解决这个

Answer 1

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

要解决这个问题，你需要改变你的比例，像这样:

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

对于使用时间刻度，您还需要一个日期适配器，因为您使用的是js日期，您可以使用正常的日期适配器，如下所示:

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

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