反应输入以过滤到图表。如何将硬编码数字转换为变量？

Question

我在 React 中创建了一个过滤器来在图表中显示我的数据。过滤器和图表运行良好，但只有当我手动对要过滤的值进行硬编码时。问题是，现在当我想包含一个输入字段和一个提交按钮来拥有一个动态图表时，它不起作用。

问题与数字 9 被硬编码有关。目的是改成前端可以提交的变量：

const filterData = myChart.data.datasets[0].data.filter(value => value > 9)

我尝试了不同的解决方案，例如创建一个新变量，或者添加 target.value，等等，但是没有任何效果。

密码VerticalBar.js

import React, { useState } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import Chart from 'chart.js/auto';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import faker from 'faker';
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';

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

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Chart',
    },
  },
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
const ctx = null;
var myChart = new Chart(ctx, ({
  data: {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: ['10', '9', '15', '7', '13', '8', '20'],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 235, 0.5)',
        'rgba(255, 159, 64, 0.5)',
        'rgba(53, 162, 235, 0.5)',
      ],
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => faker.datatype.number({ min: -20, max: 20 })),
      backgroundColor: [
        'rgba(25, 9, 13, 0.2)',
      ],
      borderColor: 'rgb(53, 162, 235)',
      BorderWidth: 10 
    },
  ],
}
}
))

export default function VerticalBar() {
  const [enteredText, setEnteredText] = useState("");
  const [displayText, setDisplayText] = useState("");
  const textChangeHandler = (i) => {
    setEnteredText(i.target.value);
    console.log("target.value", i.target.value);
  };

  const filterChart = () => {
    const filterData = myChart.data.datasets[0].data.filter(value => value > 9)
    console.log("filterData y", filterData)
    const filterLabels = [];
    const filterColors = [];
    let i = 0;
    for (i; i < filterData.length; i++) {
      const result = myChart.data.datasets[0].data.indexOf(filterData[i]);
      const labelsresult = myChart.data.labels[result];
      const colorsresult = myChart.data.datasets[0].backgroundColor[result]
      filterLabels.push(labelsresult);
      filterColors.push(colorsresult);
    }
    myChart.data.datasets[0].data = filterData;
    myChart.data.labels = filterLabels;
    myChart.data.datasets[0].backgroundColor = filterColors;
  }
  filterChart();

  const submitHandler = (event) => {
    event.preventDefault();
    setDisplayText(enteredText);
    const x = enteredText;
    console.log(x);
    setEnteredText("");
  };


  return (
    <div>
    <Bar options={options} data={myChart.data} />
    <div className="App">
      <h1>Get user input</h1>
      <form onSubmit={submitHandler}>
        <Box component="form" sx={{'& > :not(style)': { m: 1, width: '25ch' },}} noValidate autoComplete="off" >
      <TextField  placeholder="type something"
          type="number"
          value={enteredText}
          onChange={textChangeHandler} id="outlined-basic" label="Number" variant="outlined" />
    </Box>
        <Button type="submit" variant="contained" endIcon={<SendIcon />}>
          Submit
       </Button>
      </form>
      <p>You just typed: {displayText}</p>
    </div>
    <hr></hr>
    </div>
  )
  }

Answer 1

在您的 filterChart 方法中，您只需要接受输入数字的参数。然后你可以像这样过滤它：

const textChangeHandler = (i) => {
  setEnteredText(i.target.value);
  console.log("target.value", i.target.value);
  filterChart(Number(i.target.value)); // Call filter after entering value
};

const filterChart = (filterVal = Number.MIN_SAFE_INTEGER) => { // Expect value to filter against, default to lowest safe integer to show all data
  const filterData = myChart.data.datasets[0].data.filter(value => value > filterVal) // Filter against value
  console.log("filterData y", filterData)
  const filterLabels = [];
  const filterColors = [];
  let i = 0;
  for (i; i < filterData.length; i++) {
    const result = myChart.data.datasets[0].data.indexOf(filterData[i]);
    data.datasets[0].data.indexOf(filterData[i]);
    const labelsresult = myChart.data.labels[result];
    const colorsresult = myChart.data.datasets[0].backgroundColor[result]
    filterLabels.push(labelsresult);
    filterColors.push(colorsresult);
  }
  myChart.data.datasets[0].data = filterData;
  myChart.data.labels = filterLabels;
  myChart.data.datasets[0].backgroundColor = filterColors;
}

此外，如果您正在使用 react-chartjs，则无需自己创建图表对象，这样做只会浪费内存

反应输入以过滤到图表。如何将硬编码数字转换为变量？

React input to filter to chart. How convert a hardcoded number into a variable?

filter

reactjs

chart.js

react-hooks