我在 reactjs 中制作了一个自定义 chartjs 组件,并希望在 xAxes 中呈现日期,在 yAxes 中呈现从 -1 到 1 的数字,但它呈现数据的方式不正确。
import React, { useRef, useEffect } from "react";
import Chart from "chart.js";
const ChartComponent = ({ data, label, min, max }) => {
const canvasRef = useRef(null);
useEffect(() => {
const canvasObj = canvasRef.current;
const context = canvasObj.getContext("2d");
new Chart(context, {
type: "line",
data: {
datasets: [
{
label: label,
backgroundColor: "transparent",
data: data,
},
],
},
options: {
scales: {
xAxes: [
{
type: "time",
distribution: "linear",
time: {
unit: "month",
displayFormats: {
quarter: "YYYY mm dd",
},
},
},
],
yAxes: [
{
ticks: {
suggestedMax: max,
suggestedMin: min,
},
},
],
},
},
});
}, [data, label, min, max]);
return <canvas ref={canvasRef}> </canvas>;
};
export default ChartComponent;
我将这样的数据传递给组件
<ChartComponent
min={-1}
max={1}
label="date"
data={[
{
x: "30/03/2018",
y: 0.1158,
},
{
x: "24/09/2018",
y: 0.1975,
},
{
x: "23/12/2018",
y: 0.1913,
},
{
x: "23/03/2019",
y: 0.2137,
},
]}
/>;
我不得不提到我做了同样的事情并且工作正常这是下面的例子
<ChartComponent
min={1270}
max={1272}
label=" مساحت دریاچه"
data={[
{
x: "04/02/2017",
y: 1270.7,
},
{
x: "06/26/2017",
y: 1270.74,
},
{
x: "09/19/2017",
y: 1270.31,
},
{
x: "12/18/2017",
y: 1270.28,
},
{
x: "06/16/2018",
y: 1270.81,
},
{
x: "09/24/2018",
y: 1270.27,
},
{
x: "12/23/2018",
y: 1270.54,
},
{
x: "05/25/2019",
y: 1271.94,
},
{
x: "06/18/2019",
y: 1271.84,
},
{
x: "09/19/2019",
y: 1271.31,
},
{
x: "12/18/2019",
y: 1271.25,
},
{
x: "03/12/2020",
y: 1271.48,
},
{
x: "06/25/2020",
y: 1271.72,
},
]}
/>;
任何建议将不胜感激。谢谢你。