React Amchart - Как убрать анимацию при загрузке графиков - PullRequest
Новая
       1

React Amchart - Как убрать анимацию при загрузке графиков

0 голосов
/ 16 марта 2020

Я использую amcharts в среде React Hooks.

Я использую принудительное дерево. https://www.amcharts.com/demos/force-directed-tree/

Данные, примененные к диаграмме, фильтруются на основе высоких значений и затем применяются повторно. Каждый раз, когда данные повторно применяются, диаграмма отображается и анимация продолжает применяться.

Как удалить анимацию при загрузке диаграмм

Или мы будем признательны, если вы сообщите нам, как применить полосу прокрутки, предоставленную amcharts к этому графику. 

    useEffect(() => {
        const chart = am4core.create('networkChart', am4plugins_forceDirected.ForceDirectedTree);
        const networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
        chart.data = data;
        chart.dataSource.updateCurrentData = true;
        chart.animationPlayed = true;
        chart.dataSource.reloadFrequency = 1000;

        networkSeries.dataFields.id = 'name';
        networkSeries.dataFields.value = 'value';
        networkSeries.dataFields.name = 'name';
        networkSeries.dataFields.children = 'children';
        networkSeries.nodes.template.tooltipText = '{name}:{value}';
        networkSeries.nodes.template.fillOpacity = 1;
        networkSeries.manyBodyStrength = -20;
        networkSeries.links.template.strength = 0.8;
        networkSeries.links.template.distance = 1;
        networkSeries.minRadius = am4core.percent(3);
        networkSeries.maxRadius = am4core.percent(10);
        networkSeries.nodes.template.label.text = '{name}';
        networkSeries.fontSize = 12;
        networkSeries.maxLevels = 4;

        networkSeries.events.disableType('inited', function() {
            networkSeries.animate(
                {
                    property: 'velocityDecay',
                    to: 1,
                },
                3000,
            );
        });

        // Add Legend
        chart.legend = new am4charts.Legend();
        chart.legend.labels.template.fill = am4core.color('#fff');

    }, [data]);

1 Ответ

0 голосов
/ 30 марта 2020

Я не хотел, чтобы они использовались, поэтому я использовал unuseTheme и передал ему тему анимации. Это убрало анимацию относительно графика.

Пример:

am4core.unuseTheme(am4themesAnimated);

...