Question

我在一个页面上使用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 to 20`，这样至少我可以看到问题是什么，但仍然没有。

Answer 1

当多个图表在同一页面上时，饼图肯定会制作动画，但是如果它们全部初始化，它们可能会全部陷入浏览器，导致动画运行过快或者如此不稳定，以至于看起来不起作用。您可能需要考虑一种延迟加载技术，在该技术中，您使用每个图表的init事件在延迟后初始化下一个图表，或者下面的AmCharts知识库链接中描述的延迟加载技术： / p>

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：饼图动画不起作用

1 个答案: