В настоящее время я использую react-chartjs-2, чтобы иметь возможность вставлять диаграмму в компонент реакции. Я импортирую данные и параметры диаграммы, которые находятся в другом файле js. В моем приложении я также делаю вызов POST, который возвращает некоторые данные в своем теле, которые я хочу использовать в качестве данных для диаграммы, и диаграмма может обновляться каждый раз, когда вызывается запрос POST. Ответ POST в настоящее время хранится в состоянии RESTResponse. Поэтому, чтобы получить доступ к данным ответа за пределами диаграммы в реакции, я обычно вызываю {this.state.RESTresponse.total}
. Я хочу иметь возможность использовать {this.state.RESTresponse.total}
в качестве данных на моей диаграмме. Как я смогу это сделать? Было бы проще, если бы я не использовал два отдельных файла js для диаграммы и основного компонента? Благодарю вас!
Вот код, в котором вызывается диаграмма:
import {HorizontalBar} from "react-chartjs-2";
import {Row} from "reactstrap";
// Importing the chart data and options to be used in <HorizontalBar>
import {stackedChart} from "variables/charts.js";
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
RESTresponse: []
};
}
async onTodoChange(event){
let updateJSON = {...this.state.RESTresponse, [event.target.name] : val}
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(updateJSON)
};
const response = await fetch('/api/calculate', requestOptions);
const body = await response.json();
this.setState({RESTresponse : body });
}
render() {
return (
<>
<div className="content">
<Row>
<HorizontalBar
data={stackedChart.data}
options={stackedChart.options}
/>
</Row>
</div>
</>
);
}
}
А вот код, в котором определены данные и опции:
let stackedChart = {
data: canvas => {
return {
datasets: [
{
label: ' Total Value',
data: [10], //<--- I want to dynamically update this data value from the POST response
backgroundColor: '#C4D156'
}
]
};
},
options: {
maintainAspectRatio: false,
legend: {
display: true,
labels: {
usePointStyle: true,
borderWidth: 0,
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 3) {
return false;
}
return true;
}
}
},
tooltips: {enabled: false},
hover: {mode: null},
responsive: true,
scales: {
yAxes: [
{stacked: true},
],
xAxes: [{stacked: true,
ticks: {
display: false
}
},
]
}
}
};
module.exports = {
stackedChart
};