我有一个条形图,可以根据年份获取数据。我从主要部分中获取年份的当前名称,如下所示:
应用程序:
<DonateChart year={this.state.active_menu}/>
捐赠图:
<Bar
data={{
labels: this.props.year === 2018 ? ['20.01', '20.02'] : [20.03],
datasets: [{
label: false,
fill: true,
backgroundColor: "#D9D9D9",
borderCapStyle: 'square',
pointBorderColor: "white",
data: this.props.year === 2018 ? ['2222', '3333'] : ['4444'],
spanGaps: false,
},
{
label: false,
fill: true,
backgroundColor: "#00ACE5",
borderCapStyle: 'square',
pointBorderColor: "white",
data: this.props.year === 2018 ? ['2222', '3333'] : ['4444'],
spanGaps: false,
}],
}}
options={{
responsive: false,
fullCornerRadius: false,
maintainAspectRatio: false,
tooltips: {enabled: false},
hover: {mode: null},
scales: {
yAxes: [{
stacked: true,
ticks: {
fontColor: 'black',
beginAtZero: true,
min: 0,
max: 5000,
stepSize: 1000,
fontFamily: 'HelveticaNeueCyr',
fontSize: 10,
},
gridLines: {
color: "rgba(0, 0, 0, 0.1)",
}
}],
xAxes: [{
stacked: true,
ticks: {
fontColor: '#black',
fontFamily: 'HelveticaNeueCyr',
fontSize: isMobile ? 8 : 10,
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
}]
},
legend: {
display: false
},
title: {
display: false,
}
}}/>
但是当我切换年份并且新键位于this.state.year
中时,将不会绘制图表。
之后,我尝试创建两个不同的图表,并根据状态在它们之间进行切换,如下所示:
const bar1 = <Bar some code />
const bar2 = <Bar some code />
return(
this.state.year === 2018 ? bar1 : bar2
)
它也没有导致任何事情,进度被扭曲了。
请告诉我如何正确实现此类功能。 我将不胜感激
答案 0 :(得分:0)
在图表中,有一种常规的重绘方法。
如果我像这样true
进入redraw={this.state.update}
,一切正常!