在按钮 React chartjs 上重新绘制图表答案

【问题标题】：Re-draw Chart on button React chartjs在按钮 React chartjs 上重新绘制图表
【发布时间】：2019-02-21 09:18:46
【问题描述】：

我有一个根据年份获取数据的条形图。我从主要组件中获取当前的年份名称如下：

应用：

<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
)

它也没有导致任何事情，时间表被扭曲了。

请告诉我，如何正确实现这些功能。如果有任何建议，我将不胜感激

【问题讨论】：

标签： reactjs canvas charts react-props react-chartjs

【解决方案1】：

在图表中有一种常规的重绘方法。如果我传入它true，像这样：redraw={this.state.update}，一切正常！

【讨论】：