amCharts：饼图动画不起作用答案

【问题标题】：amCharts: Pie chart animation not workingamCharts：饼图动画不起作用
【发布时间】：2017-07-13 17:34:58
【问题描述】：

我在单个页面上使用来自amCharts 的多个饼图，当页面加载时动画不工作，我希望它工作。下面是我用来渲染图表的代码。

var Piechart132 = AmCharts.makeChart('div132', {
    labelsEnabled: false,
    autoMargins: false,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    pullOutRadius: 0,
    type: 'pie',
    theme: 'dark',
    dataProvider: [
        { country: 'Banking', litres: 300000000 },
        { country: 'Carpenter', litres: 349500000000 },
        { country: 'Doctor', litres: 433650000000 },
        { country: 'Gas', litres: 108326000000 },
        { country: 'Mechanic', litres: 366450000000 }
    ],
    outlineThickness: 1,
    outlineAlpha: 1,
    legend: { enabled: true, valueText : '' },
    outlineColor: undefined,
    titles: [{ text: 'Industry wise Exposure' }],
    valueField: 'litres',
    titleField: 'country',
    balloon: { fixedPosition: true }
});

当我在 Fiddle 上执行时，除了我想提到的相同代码之外，它工作正常，可能存在任何其他冲突，但我还是找不到它。我什至尝试插入startDuration and set its value to20`，这样至少我可以看到问题所在，但仍然没有。

【问题讨论】：

标签： pie-chart amcharts

【解决方案1】：

当多个图表在同一页面上时，饼图肯定会生成动画，但是如果它们同时全部初始化，它们可能会阻塞浏览器，从而导致动画运行太快或太不稳定的不稳定体验他们似乎不起作用。您可能需要考虑一种延迟加载技术，在该技术中，您使用每个图表的init 事件在延迟后初始化下一个图表，或者在下面的 AmCharts 知识库链接中描述的延迟加载技术：

https://www.amcharts.com/kbase/lazy-loading-120-charts-page/

https://www.amcharts.com/kbase/make-the-charts-lazy-initialize-only-when-they-scroll-into-view/

【讨论】：

这根本没有解决问题。他在问如何做一个芝士汉堡，而你教他如何做薯条。我遇到了完全相同的问题，即使页面上只有一个图表，而且只有饼图类型。
你能提供一个重现这个的链接吗？你有多少数据？您的页面上还有什么内容？浏览器版本？鉴于他和您提供的信息有限，很难提供任何其他建议。如果你给我更多的工作，我很乐意提供帮助。所谓的油炸制作说明通常适用于我们同时遇到多个图表问题的用户，除非有其他事情发生并且一个图表的缓慢是非常罕见的。随意添加到线程或联系 amcharts 支持，我们很乐意与您一起深入研究。
我的问题是带有饼图的东西在反应组件中不起作用（尽管系列工作正常）。我能够通过简单的一点来重新设置动画来解决它：if(props.options.type === 'pie') { this.refs.chart.style.visibility = "hidden"; setTimeout(()=>{ this.refs.chart.style.visibility = "visible"; this.chart.animateAgain(); },500); }
明白了。但是，此问题与用户发布的问题不同。您使用的是我们的react component 还是自制的？如果是前者，将不胜感激错误报告。我们尽最大努力使所有东西都能与现代框架一起使用，但我们库的当前版本已经很长了。值得一提的是，我们的下一个主要版本 v4 正在构建以支持开箱即用的现代框架，尽管 v4 的 API 与 v3 不兼容。如果您有任何其他问题，请随时与我们联系。