时间戳

首页 > 解决方案 > 每次单击任何按钮或调整窗口大小时，都会重新绘制 Chartist 图表

reactjs - 每次单击任何按钮或调整窗口大小时，都会重新绘制 Chartist 图表

问题描述

我真的很喜欢这个库，但我似乎无法以某种方式控制这个问题。如果发生任何事件，则每次都会重新绘制图表。

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

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

标签： reactjschartist.js

解决方案

这个问题是由于使用了动画造成的，所以你必须把所有的animate函数放在一个if语句中，并在draw函数之外设置一个计数器。

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

推荐阅读