如何使用 react-chartjs-2 过滤和更新日期

Question

我正在一个项目中使用React-Chartjs-2，并且在更新我的图表过滤器时卡住了。我遵循下面的演示，但这不仅仅是一个反应，而是香草版本。https://www.youtube.com/watch?v=Gc5JF2TUG7o&t=679s @ 16:32是更新函数，用于更新图表上的过滤日期。我能够获得日期数组的索引，但我的图表没有更新。我如何能够访问和更新Line组件中的标签和数据集值?

import React from 'react';
import {Line} from 'react-chartjs-2'
function BarChart() {
const dates =  ['2021-08-25', '2021-08-26','2021-08-27','2021-08-28', '2021-08-29', '2021-08-30','2021-08-31' ];
const datapoints =[1,2,4,9,12,15,16]


function filterData() {
const dates2 = [...dates];
console.log(dates2);
const startdate =  document.getElementById('startdate');
const enddate =  document.getElementById('enddate');
//get the index number in the array 
const indexstartdate = dates2.indexOf(startdate.value);
const indexenddate = dates2.indexOf(enddate.value);
console.log(indexstartdate);
console.log(indexenddate);
//slice the array
const filterDate = dates2.slice(indexstartdate, indexenddate + 1);
//replace label in the chart
//HELP HERE!!!


}
return (
<div>
<div>
<Line id='myChart'
data={{
labels:dates,
datasets: [
{
label: 'Sales',
data:datapoints,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
},

],
}}
height={400}
width={400}
options={{maintainAspectRatio:false,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
}
}
]
},
}}

/>

</div>
<input type='date' onChange={filterData} id='startdate' />
<input type='date' onChange={filterData}  id='enddate'  />
</div>
)
}
export default BarChart

Answer 1

你需要使用React状态，这样你的组件才会呈现。这是我的解决办法，希望能有所帮助。

import React, { useRef, useState } from "react";
import { Line } from "react-chartjs-2";
function BarChart() {
const initialDates = [
"2021-08-25",
"2021-08-26",
"2021-08-27",
"2021-08-28",
"2021-08-29",
"2021-08-30",
"2021-08-31",
];
const initialDataPoints = [1, 2, 4, 9, 12, 15, 16];
const [dates, setDates] = useState(initialDates);
const [dataPoints, setDataPoints] = useState(initialDataPoints);
console.log(dates, dataPoints);
const inputRef1 = useRef();
const inputRef2 = useRef();
function filterData() {
const dates2 = [...dates];
const dataPoints2 = [...dataPoints];

//slice the array
let value1 = inputRef1.current.value;
let value2 = inputRef2.current.value;
const indexstartdate = dates2.indexOf(value1);
const indexenddate = dates2.indexOf(value2);
console.log(indexstartdate);
console.log(indexenddate);
//slice the array
const filterDate = dates2.slice(indexstartdate, indexenddate + 1);
const filterDataPoints = dataPoints2.slice(
indexstartdate,
indexenddate + 1
);
console.log(filterDate, filterDataPoints);
//replace label in the chart
//HELP HERE!!!
setDates(filterDate);
setDataPoints(filterDataPoints);
console.log(dates, dataPoints);
}
return (
<div>
<div>
<Line
id="myChart"
data={{
labels: dates,
datasets: [
{
label: "Sales",
data: dataPoints,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
}}
height={400}
width={400}
options={{
maintainAspectRatio: false,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
}}
/>
</div>
<input type="date" ref={inputRef1} />
<input type="date" ref={inputRef2} />
<button onClick={filterData}>Filter</button>
</div>
);
}
export default BarChart;