在 react 中，使用 chart.js，从服务器检索的数据显示为折线图。
当您单击图表顶部的年份按钮时，将从服务器检索该年份的数据并再次显示在图表上。
我试图在带来数据时使用 setState 更改值，但它不会改变。
**chart.js 是使用 cdn 导入的。
class IndexYear extends React.Component {
constructor(props) {
super(props);
this.passData = this.passData.bind(this);
}
passData(e) {
this.props.sendData(e.target.value)
console.log(">>1. selectYear" + e.target.value);
}
render() {
const style = {
margin: '15px',
marginBottom:'50px',
width: '100px',
height:'30px'
};
const year = this.props.years;
return (
<input style={ style }
type="button"
value={year}
onClick={this.passData}
key={year}
/>
);
}
}
在sendYearData函数中，我需要用我从服务器获取的数据来更改图表数据，但它不起作用。
class LineChart extends React.Component {
chartRef = React.createRef();
constructor(props) {
super(props);
//console.log("1. constructor()");
this.state = {
orders: [],
student: {
Jan: '', Feb: '', Mar: '', Apr: '', May: '', Jun: '', July: '', Aug: '', Sep: '', Oct: '', Nov: '', Dec: ''
},
special: {
Jan: '', Feb: '', Mar: '', Apr: '', May: '', Jun: '', July: '', Aug: '', Sep: '', Oct: '', Nov: '', Dec: ''
},
premium: {
Jan: '', Feb: '', Mar: '', Apr: '', May: '', Jun: '', July: '', Aug: '', Sep: '', Oct: '', Nov: '', Dec: ''
},
master: {
Jan: '', Feb: '', Mar: '', Apr: '', May: '', Jun: '', July: '', Aug: '', Sep: '', Oct: '', Nov: '', Dec: ''
}
};
this.sendYearData = this.sendYearData.bind(this);
}
componentDidCatch(error, info) {
console.log("error : " + error);
console.log("info : "+ info);
}
sendYearData(year) {
var year = year;
console.log(">>>2.selectYear" + year);
var formData = { "selectYear": year}
fetch("/Statistics/FindOrderSalesChart/", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then((response) => response.json())
.then((data) => {
this.setState({
orders: data
});
})
}
componentDidMount() {
const ctx = this.chartRef.current.getContext("2d");
//console.log("4. componentDidMount()");
getOrderList()
.then((response) => {
this.setState({
orders: response
})
//console.log("7. getOrderList()");
//console.log("8. response : " + response);
for (var i = 0; i < response.length-1; i++) {
//console.log("i : " + i);
const chartDateMonth = response[i].orderCountChart[0].chartDateMonth;
//console.log("chartDateMonth : " + chartDateMonth);
if (chartDateMonth == "01") {
this.state.student.Jan = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Jan = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Jan = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Jan = response[i].orderCountChart[0].chartMasterTotalCount;
//console.log("?###? : " + this.state.master.Jan);
//console.log("?***? : " + response[i].orderCountChart[0].chartMasterTotalCount);
}
if (chartDateMonth == "02") {
this.state.student.Feb = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Feb = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Feb = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Feb = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "03") {
this.state.student.Mar = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Mar = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Mar = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Mar = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "04") {
this.state.student.Apr = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Apr = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Apr = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Apr = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "05") {
this.state.student.May = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.May = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.May = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.May = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "06") {
this.state.student.Jun = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Jun = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Jun = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Jun = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "07") {
this.state.student.July = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.July = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.July = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.July = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "08") {
this.state.student.Aug = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Aug = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Aug = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Aug = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "09") {
this.state.student.Sep = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Sep = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Sep = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Sep = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "10") {
this.state.student.Oct = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Oct = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Oct = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Oct = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "11") {
this.state.student.Nov = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Nov = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Nov = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Nov = response[i].orderCountChart[0].chartMasterTotalCount;
}
if (chartDateMonth == "12") {
this.state.student.Dec = response[i].orderCountChart[0].chartStudentTotalCount;
this.state.special.Dec = response[i].orderCountChart[0].chartSpecialTotalCount;
this.state.premium.Dec = response[i].orderCountChart[0].chartPremiumTotalCount;
this.state.master.Dec = response[i].orderCountChart[0].chartMasterTotalCount;
}
}
new Chart(ctx, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
data: [this.state.student.Jan, this.state.student.Feb, this.state.student.Mar, this.state.student.Apr, this.state.student.May, this.state.student.Jun, this.state.student.July, this.state.student.Aug, this.state.student.Sep, this.state.student.Oct, this.state.student.Nov, this.state.student.Dec],
//data: [80, 100, 54, 70, 93, 100, 110],
label: "Student",
borderColor: "#3e95cd",
backgroundColor: "#7bb6dd",
fill: false,
}, {
data: [this.state.special.Jan, this.state.special.Feb, this.state.special.Mar, this.state.special.Apr, this.state.special.May, this.state.special.Jun, this.state.special.July, this.state.special.Aug, this.state.special.Sep, this.state.special.Oct, this.state.special.Nov, this.state.special.Dec],
//data: [70, 90, 44, 60, 83, 90, 100],
label: "Special",
borderColor: "#3cba9f",
backgroundColor: "#71d1bd",
fill: false,
}, {
data: [this.state.premium.Jan, this.state.premium.Feb, this.state.premium.Mar, this.state.premium.Apr, this.state.premium.May, this.state.premium.Jun, this.state.premium.July, this.state.premium.Aug, this.state.premium.Sep, this.state.premium.Oct, this.state.premium.Nov, this.state.premium.Dec],
//data: [10, 21, 60, 44, 17, 21, 17],
label: "Premium",
borderColor: "#ffa500",
backgroundColor: "#ffc04d",
fill: false,
}, {
data: [this.state.master.Jan, this.state.master.Feb, this.state.master.Mar, this.state.master.Apr, this.state.master.May, this.state.master.Jun, this.state.master.July, this.state.master.Aug, this.state.master.Sep, this.state.master.Oct, this.state.master.Nov, this.state.master.Dec],
//data: [6, 3, 2, 2, 7, 0, 16],
label: "Master",
borderColor: "#c45850",
backgroundColor: "#d78f89",
fill: false,
}
]
},
options: {
plugins: {
legend: {
display: true
}
}
}
});
})
}
render() {
const rows = [];
const indexCount = this.state.orders.length;
//console.log("indexCount ::: " + indexCount);
for (let i = 0; i < this.state.orders.length; i++) {
if (i == indexCount - 1) {
var indexYearCount = this.state.orders[i].indexYear.length;
//console.log("indexYearCount : " + indexYearCount);
//var data = this.state.orders[i].indexYear[0];
//console.log("dataValue ::: " + data);
for (let j = 0; j < this.state.orders[i].indexYear.length; j++) {
//console.log("j ::: " + j);
var checkData = this.state.orders[i].indexYear[j];
console.log("checkData ::: " + checkData);
rows.push(
<IndexYear
years={checkData}
key={checkData.value}
sendData={this.sendYearData}
/>
);
}
}
}
return (
<div>
<div
>
{rows}
</div>
<canvas
id="myChart"
ref={this.chartRef}
/>
</div>
)
}
}
// # fetchAPI : server
function getOrderList() {
return fetch("/orderSalesChart")
.then((response) => response.json())
.then((data) => {
return data;
})
}
ReactDOM.render(
<LineChart />,
document.getElementById('content')
);