Question

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

这是此图表的来源

$('#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]
}]

}）;

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

Answer 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/

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

1 个答案: