不要在 highcharts 基本线上工作动画答案

【问题标题】：Don`t work animation on highcharts basic line不要在 highcharts 基本线上工作动画
【发布时间】：2014-12-15 08:17:56
【问题描述】：

我在网站上有这样的问题，我有 3 个高图表。这是一页的网站，所以当我向下滚动到他时，我的图表会动画。但是一张图表没有动画，我不知道为什么。

This is site

这是这张图表的来源

$('#container').highcharts({
chart: {
    type: 'line'
},
title: {
    text: 'Monthly Average Temperature'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
    title: {
        text: 'Temperature (°C)'
    }
},
plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        },
        enableMouseTracking: false
    },
    series: {
        animation: {
            duration: 2000
        }
    }
},
series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
    name: 'London',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]

});

有人知道，为什么它可能不起作用？

【问题讨论】：

标签： highcharts

【解决方案1】：

~~指向您网站的链接似乎已损坏。~~

Chart 本身的外观和动画效果还可以 - example

从您的网站我看到您正在使用插件来推迟初始系列动画，直到元素出现 (https://github.com/s3rgiosan/highcharts-defer)。

它看起来有问题 - 它将阻止某些类型的动画系列，如线、样条线（可能还有更多），除非该系列从一开始就可见 - 证明：http://jsfiddle.net/8YVUb/11/。

您可以使用替代方法来推迟系列动画 - Javascript/JQuery perform function when user scrolls near bottom of page

示例：http://jsfiddle.net/uh63w9fL/

【讨论】：