如何使用useState在chart.js上设置过滤日期？

Question

我想在图表上设置过滤器日期，并通过名为 的组件引入日期按钮。我决定最好使用 useState 在按钮和图表上设置更改。我有问题让它有用。你能帮我解决这个挑战吗...？ :)

第 1 部分：

/// LineChart.js

import React from 'react';
import {Line} from 'react-chartjs-2';
import './chartStyle.css';
import JSONdata from "../json-csv/csvjson.json";
import ButtonDate  from '../Button/Buttonsdate'
import{Chart as ChartJS,
    LineElement,
    PointElement,
    CategoryScale,
    LinearScale,
    Tooltip,
    Legend,
    Colors} from 'chart.js';

    ChartJS.register(
        LineElement,
        PointElement,
        CategoryScale,
        LinearScale,
        Tooltip,
        Legend,
        Colors
      );

const LineChart = () => {

    ChartJS.defaults.backgroundColor = '#d90731';
    ChartJS.defaults.borderColor = '#000';
    ChartJS.defaults.color = '#000';

    const options = {
        scales: {
          x: {  
            grid: {
              color: 'gray',
              tention:3,
              borderColor: 'blue',
              backgroundColor:'white'
            }
          },
          y: { 
            grid: {
              color: 'gray',
              borderColor: 'blue
            }
          }
        }
      };

      /////// Get data From Json file to make chart datas
        const lables = JSONdata.map(row => row.Date);
        const datapoints = JSONdata.map(row => row.PUSCH);
        const chartData = {
        labels: lables,
        datasets:[{
          label:'PUSCH',
          data:datapoints,
          borderColor:'#0975ab',
          tention:0.1,
          backgroundColor:'#0975ab',
          Colors:'black',
          borderWidth:2.8,
          },
        ],
      };

    return (
        <div className='chartLinestyle'>
          <Line data={chartData}  options={options}/>
          <ButtonDate />
        </div>
    );
}

export default LineChart;

其他组件：

//ButtonsDate.js


import React ,{useState} from 'react';

const ButtonDate = () =>{
    const [dateSelect,setDateSelect] = useState('')
    const handleChange = (event) =>{
        if (event) event.preventDefault();
        setDateSelect(event.target.value)
    }
    console.log('dateSelect',dateSelect);
    return(
        <div>
        <input onChange={handleChange} type='date' id='startDate' value="9/1/23"></input>
        <input onChange={handleChange} type='date' id='enddate' value="9/12/23"></input>
        </div>
    )
};

export default ButtonDate;

Answer 1

我看到该数据从 json 文件加载到您的应用程序中并存储为 const。 我建议，如果您希望数据在事件发生时动态更改（按日期按钮） - 您应该考虑将其存储为状态。

然后 - 我建议在主文件中也传递存储日期状态，并让按钮通过传递 setState 属性来更改它。

第 1 部分：

const LineChart = () => {
    
    // your code
    
    const options = {...};
      
      /////// declare your state
      const [lables, setLabels] = useState([]);
      const [datapoints, setDatapoints] = useState([]);
      const [date, setDate] = useState('<put default date here>')

      //initialize the data
      useEffect(() => {
        const filteredLables = JSONdata.map(row => row.Date).filer(() => {
            // make a filter function using the date state
        })

        const filteredDatapoints = JSONdata.map(row => row.Date).filer(() => {
            // make a filter function using the date state
        })

        setLabels(filteredLables)
        setDatapoints(filteredDatapoints)
    //set the dependencies array to date to trigger the useState again when it changes   
    }, [date])



      const chartData = {...};

  return (
      <div className='chartLinestyle'>
        <Line data={chartData}  options={options}/>
        <ButtonDate dateSelect={date} setDateSelect={(newDate) => setDate(newDate)}/>
      </div>
  );
}

第 2 部分：

// dateSelected is the state from the parent
// setDateSelected is a function to update the state of the father
const ButtonDate = (dateSelect, setDateSelect) =>{
    const handleChange = (event) =>{
        if (event) event.preventDefault();
        setDateSelect(event.target.value)
    }
    console.log('dateSelect', dateSelect);
    return(
        <div>
        <input onChange={handleChange} type='date' id='startDate' value="9/1/23"></input>
        <input onChange={handleChange} type='date' id='enddate' value="9/12/23"></input>
        </div>
    )
};