Highcharts股票动画

Question

如何通过鼠标单击停止图表动画？

通过鼠标点击启动它是相当容易的……

events : {
    click : function (e) {       
        // set up the updating of the chart each second
        var series1 = this.series[0];
        var series2 = this.series[1];
        var series3 = this.series[2];
        setInterval(function () {
            series1.addPoint(u1Array[i], true, true);
            series2.addPoint(u2Array[i], true, true);
            series3.addPoint(u3Array[i], true, true);
            i++;
        }, 1000);
    }
}

Answer 1

可能有更好的方法来包装这一切，它可能需要一些按摩才能起作用，因为我没有一个完整的例子来测试，但作为一个10…

first :为了清除你设置的计时器，你需要一个变量来存储它(根据http://www.w3schools.com/jsref/met_win_clearinterval.asp)，所以我的第一个尝试是在我假设的更大的图表对象中创建一个'interval‘对象-如果我有你的问题的完整版本，我会测试它是否工作正常……不确定interval是否需要更加全球化。

Second:点击函数的逻辑需要根据它当前是否正在运行而改变……因此，假设函数可以作为变量传递，我已经定义了两个函数，它们在...真的很想在作为答案发布之前先测试一下！(我犯了一些严重的语法错误！)

最后：我担心的是i的作用域-一旦你第三次点击，它可能会从0重新开始(同样，我想测试一下！)所以我也把它放在了chart对象中自己的变量中。

所以..。

events : {
    click : this.start
},

interval: null,

i: 0,

start: function(e){
    var series1 = this.series[0];
    var series2 = this.series[1];
    var series3 = this.series[2];
    this.interval = setInterval(function () {
        series1.addPoint(u1Array[this.i], true, true);
        series2.addPoint(u2Array[this.i], true, true);
        series3.addPoint(u3Array[this.i], true, true);
        this.i++;
    }, 1000);
    this.events.click = this.stop;
},

stop: function(e){
    clearInterval(this.interval);
    this.events.click = this.start;
}