我正在使用 react chart.js 按年创建销售图表。
当点击年份按钮时，会从服务器端取来对应的年份数据，并更新图表数据。
但是，chart.js 折线图示例中看到的上半部分的图例没有出现。
在示例中，当您单击顶部图例时，图表会被隐藏和显示，因此该功能必不可少。
请让我知道下面的代码有什么问题
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}
/>
);
}
}
如果新图表在 componentDidMount() 的 getOrderList() 之外，则图例可见。但是当这种情况发生时，我无法将我的数据放入图表中。
所以似乎新的图表（）必须在那个时候。
我想被这样展示
但现实
class LineChart extends React.Component {
constructor(props) {
super(props);
//console.log("1. constructor()");
this.state = {
orders: [
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [{ "chartDateText": "", "chartDateMonth": "", "chartStudentTotalCount": 0, "chartSpecialTotalCount": 0, "chartPremiumTotalCount": 0, "chartMasterTotalCount": 0 }], "indexYear": [] },
{ "orderCountChart": [], "indexYear": [] }
]
};
this.sendYearData = this.sendYearData.bind(this)
this.ctx = null;
this.chartRef = React.createRef();
this.myChart = null;
}
componentDidCatch(error, info) {
console.log("error : " + error);
console.log("info : " + info);
}
sendYearData(year) {
var year = 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) => {
console.log(data)
this.setState({
orders: data
});
this.myChart.destroy()
this.myChart = new Chart(this.ctx, {
type: "line",
data: {
labels: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
datasets: [{
data: [
this.state.orders[0].orderCountChart[0].chartStudentTotalCount,
this.state.orders[1].orderCountChart[0].chartStudentTotalCount,
this.state.orders[2].orderCountChart[0].chartStudentTotalCount,
this.state.orders[3].orderCountChart[0].chartStudentTotalCount,
this.state.orders[4].orderCountChart[0].chartStudentTotalCount,
this.state.orders[5].orderCountChart[0].chartStudentTotalCount,
this.state.orders[6].orderCountChart[0].chartStudentTotalCount,
this.state.orders[7].orderCountChart[0].chartStudentTotalCount,
this.state.orders[8].orderCountChart[0].chartStudentTotalCount,
this.state.orders[9].orderCountChart[0].chartStudentTotalCount,
this.state.orders[10].orderCountChart[0].chartStudentTotalCount,
this.state.orders[11].orderCountChart[0].chartStudentTotalCount
],
//data: [80, 100, 54, 70, 93, 100, 110],
label: "student",
borderColor: "#3e95cd",
backgroundColor: "#7bb6dd",
fill: false,
}, {
data: [
this.state.orders[0].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[1].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[2].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[3].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[4].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[5].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[6].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[7].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[8].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[9].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[10].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[11].orderCountChart[0].chartSpecialTotalCount
],
//data: [70, 90, 44, 60, 83, 90, 100],
label: "special",
borderColor: "#3cba9f",
backgroundColor: "#71d1bd",
fill: false,
}, {
data: [
this.state.orders[0].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[1].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[2].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[3].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[4].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[5].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[6].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[7].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[8].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[9].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[10].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[11].orderCountChart[0].chartPremiumTotalCount
],
//data: [10, 21, 60, 44, 17, 21, 17],
label: "premium",
borderColor: "#ffa500",
backgroundColor: "#ffc04d",
fill: false,
}, {
data: [
this.state.orders[0].orderCountChart[0].chartMasterTotalCount,
this.state.orders[1].orderCountChart[0].chartMasterTotalCount,
this.state.orders[2].orderCountChart[0].chartMasterTotalCount,
this.state.orders[3].orderCountChart[0].chartMasterTotalCount,
this.state.orders[4].orderCountChart[0].chartMasterTotalCount,
this.state.orders[5].orderCountChart[0].chartMasterTotalCount,
this.state.orders[6].orderCountChart[0].chartMasterTotalCount,
this.state.orders[7].orderCountChart[0].chartMasterTotalCount,
this.state.orders[8].orderCountChart[0].chartMasterTotalCount,
this.state.orders[9].orderCountChart[0].chartMasterTotalCount,
this.state.orders[10].orderCountChart[0].chartMasterTotalCount,
this.state.orders[11].orderCountChart[0].chartMasterTotalCount
],
//data: [6, 3, 2, 2, 7, 0, 16],
label: "master",
borderColor: "#c45850",
backgroundColor: "#d78f89",
fill: false,
}
]
},
options: {
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});
})
}
componentDidMount() {
this.ctx = this.chartRef.current.getContext("2d");
//console.log("4. componentDidMount()");
getOrderList()
.then((response) => {
this.setState({
orders: response
})
this.myChart = new Chart(this.ctx, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
data: [
this.state.orders[0].orderCountChart[0].chartStudentTotalCount,
this.state.orders[1].orderCountChart[0].chartStudentTotalCount,
this.state.orders[2].orderCountChart[0].chartStudentTotalCount,
this.state.orders[3].orderCountChart[0].chartStudentTotalCount,
this.state.orders[4].orderCountChart[0].chartStudentTotalCount,
this.state.orders[5].orderCountChart[0].chartStudentTotalCount,
this.state.orders[6].orderCountChart[0].chartStudentTotalCount,
this.state.orders[7].orderCountChart[0].chartStudentTotalCount,
this.state.orders[8].orderCountChart[0].chartStudentTotalCount,
this.state.orders[9].orderCountChart[0].chartStudentTotalCount,
this.state.orders[10].orderCountChart[0].chartStudentTotalCount,
this.state.orders[11].orderCountChart[0].chartStudentTotalCount
],
//data: [80, 100, 54, 70, 93, 100, 110],
label: "student",
borderColor: "#3e95cd",
backgroundColor: "#7bb6dd",
fill: false,
}, {
data: [
this.state.orders[0].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[1].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[2].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[3].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[4].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[5].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[6].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[7].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[8].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[9].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[10].orderCountChart[0].chartSpecialTotalCount,
this.state.orders[11].orderCountChart[0].chartSpecialTotalCount
],
//data: [70, 90, 44, 60, 83, 90, 100],
label: "special",
borderColor: "#3cba9f",
backgroundColor: "#71d1bd",
fill: false,
}, {
data: [
this.state.orders[0].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[1].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[2].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[3].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[4].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[5].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[6].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[7].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[8].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[9].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[10].orderCountChart[0].chartPremiumTotalCount,
this.state.orders[11].orderCountChart[0].chartPremiumTotalCount
],
//data: [10, 21, 60, 44, 17, 21, 17],
label: "premium",
borderColor: "#ffa500",
backgroundColor: "#ffc04d",
fill: false,
}, {
data: [
this.state.orders[0].orderCountChart[0].chartMasterTotalCount,
this.state.orders[1].orderCountChart[0].chartMasterTotalCount,
this.state.orders[2].orderCountChart[0].chartMasterTotalCount,
this.state.orders[3].orderCountChart[0].chartMasterTotalCount,
this.state.orders[4].orderCountChart[0].chartMasterTotalCount,
this.state.orders[5].orderCountChart[0].chartMasterTotalCount,
this.state.orders[6].orderCountChart[0].chartMasterTotalCount,
this.state.orders[7].orderCountChart[0].chartMasterTotalCount,
this.state.orders[8].orderCountChart[0].chartMasterTotalCount,
this.state.orders[9].orderCountChart[0].chartMasterTotalCount,
this.state.orders[10].orderCountChart[0].chartMasterTotalCount,
this.state.orders[11].orderCountChart[0].chartMasterTotalCount
],
//data: [6, 3, 2, 2, 7, 0, 16],
label: "master",
borderColor: "#c45850",
backgroundColor: "#d78f89",
fill: false,
}
]
},
options: {
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});
})
}
render() {
const rows = []
const years = this.state.orders[12].indexYear
years.forEach((year) => {
rows.push(
<IndexYear
years={year}
key={year}
sendData={this.sendYearData}
/>
)
})
return (
<div>
<div>
{rows}
</div>
<canvas
id="myChart"
ref={this.chartRef}
options={{
plugins: {
legend: {
display: true,
position: 'top'
}
}
}}
/>
</div>
)
}
}
function getOrderList() {
return fetch("/orderSalesChart")
.then((response) => response.json())
.then((data) => {
return data;
})
}
ReactDOM.render(
<LineChart />,
document.getElementById('content')
);