Reactjs 每当我单击任何按钮或调整窗口大小时，图表图表都会重新绘制

我真的很喜欢这个图书馆，但我似乎无法控制这个问题。如果发生任何事件，每次都会重新绘制图形。有谁能帮我解决这个问题吗？谢谢

我正在使用reactjs，这就是我创建和显示图表图表的方式：

const dailyComplaintsChart = {
        data: {
            labels: ["M", "T", "W", "T", "F", "S", "S"],
            series: [whichType.seriesDaily]
        },
        options: {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: highestValue.highestValueDaily, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        },
        // for animation
        animation: {
            draw: function (data) {
                if (data.type === "line" || data.type === "area") {
                    data.element.animate({
                        d: {
                            begin: 600,
                            dur: 700,
                            from: data.path
                                .clone()
                                .scale(1, 0)
                                .translate(0, data.chartRect.height())
                                .stringify(),
                            to: data.path.clone().stringify(),
                            easing: Chartist.Svg.Easing.easeOutQuint
                        }
                    });
                } else if (data.type === "point") {
                    data.element.animate({
                        opacity: {
                            begin: (data.index + 1) * delays,
                            dur: durations,
                            from: 0,
                            to: 1,
                            easing: "ease"
                        }
                    });
                }
            }
        }
    };

return(
 <div className="daily-graph">

                <ChartistGraph
                    className="ct-chart-background-daily-complaints"
                    data={dailyComplaintsChart.data}
                    type="Line"
                    options={dailyComplaintsChart.options}
                    listener={dailyComplaintsChart.animation}
                />
                <div className={classes.line}>
                    <p>Daily Complaints</p>
                </div>

            </div>
)

const dailyComplaintsChart={
数据：{
标签：[“M”、“T”、“W”、“T”、“F”、“S”、“S”]，
系列：[whichType.seriesDaily]
},
选项：{
lineSmooth:ChartList.Interpolation.cardinal({
张力：0
}),
低:0,，
high:highestValue.highestValue Daily，//creative tim:我们建议您将高sa设置为最大值+某些东西，以获得更好的外观
图表填充：{
排名：0，
右:0,，
底部：0，
左：0
}
},
//动画
动画：{
绘图：函数（数据）{
if（data.type==“line”| | data.type==“area”）{
data.element.animate({
d:{
开始：600，
dur:700，
from:data.path
.clone（）
.比例（1,0）
.translate（0，data.chartRect.height（））
.stringify（），
收件人：data.path.clone（）.stringify（），
放松：charlist.Svg.easing.easeOutQuint
}
});
}else if（data.type==“点”）{
data.element.animate({
不透明度：{
开始：（data.index+1）*延迟，
dur：持续时间，
起:0,，
致:1,，
放松：“放松”
}
});
}
}
}
};
返回(
日常投诉

)

此问题是由使用动画引起的，因此您必须将所有

animate

函数放在if语句中，并在

draw

函数外设置计数器

let animated = 0;
draw(data) {
   if (animated <= label.length) {
       // animate
       data.element.animate(...)
       animated++;
   }
}

设动画=0；
绘制（数据）{
if（动画）标签在label.length中代表什么？标签在
data
objectok中的长度
谢谢！但不适用于标签。它适用于系列。“数组whichType.seriesDaily”ok，因为这样做，我的动画现在不起作用