Это мой сценарий компонента React,
Он не показывает метку, однако набор данных правильный,
Я так понимаю, это проблема обновления?
Я очень ценю любую подсказку,
import React,{useRef,useState,useEffect} from 'react'
import axios from 'axios';
import styles from "../css/test-styles.module.css";
import { Line } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js'
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
)
const DashboardPage = (props) =>{
const data = useRef();
const chartRef = useRef();
const [labels,setLabels] = useState([]);
const options = {
responsive: true,
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
},
};
useEffect(()=>{
data.current = {
//labels:["june","july","august"],
labels:labels,
datasets: [
{
label: 'Dataset 1',
data: [100,200,300],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset 2',
data: [350,150,250,100,200],
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
console.log("data",data.current); //data is correctly set
console.log("chartref",chartRef);
chartRef.current?.update();// it not work??
},[labels])
useEffect(()=>{
const now = new Date();
const OLDEST_DATE = new Date(2025, 0, 3)
const resultDates = [];
for (let date = OLDEST_DATE; date {
return d.getMonth().toString() + "/" + d.getDate().toString();
})
console.log(arr);
setLabels(arr);
},[])
return (
{data.current &&
}
);
}
export default DashboardPage;
Подробнее здесь: https://stackoverflow.com/questions/793 ... oesnt-work
Обновление диаграммы реакции-chartjs-2 не работает ⇐ Javascript
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение