Графики Chartist перерисовываются каждый раз, когда я нажимаю любую кнопку или меняю размер окна. - PullRequest
Новая
       5

Графики Chartist перерисовываются каждый раз, когда я нажимаю любую кнопку или меняю размер окна.

0 голосов
/ 05 мая 2020

Мне очень нравится эта библиотека, но я не могу как-то справиться с этой проблемой. Если происходит какое-либо событие, графики каждый раз перерисовываются. Может ли кто-нибудь помочь мне с этим? Спасибо

Я использую 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>
)

1 Ответ

1 голос
/ 17 августа 2020

Эта проблема вызвана использованием анимации, поэтому вы должны поместить всю функцию animate в оператор if и установить счетчик вне функции draw. 

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