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

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，你不需要自己制作图表对象，你只会浪费的内存使用