时间戳

首页 > 解决方案 > React Amchart - 如何在加载图表时删除动画

reactjs - React Amchart - 如何在加载图表时删除动画

问题描述

我在 React Hooks 环境中使用 amcharts。

我正在使用力导向树。 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]);

标签： reactjsamcharts

解决方案

我不想使用这些，所以我使用了unuseTheme并将动画主题传递给它。这删除了与图表相关的动画。

例子：

am4core.unuseTheme(am4themesAnimated);

推荐阅读