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的起点......

首先：为了清除您设置的计时器，您需要一个变量来存储它（根据http://www.w3schools.com/jsref/met_win_clearinterval.asp），所以我的第一次尝试是创建我假设一个'间隔'对象是一个更宽的图表对象 - 如果我有一个完整的问题版本，我会测试它是否正常工作......不确定interval是否需要更加全局化。

第二：你的点击功能的逻辑需要改变，这取决于它当前是否正在运行...所以假设函数可以作为变量传递我已经定义了两个交换每个函数的函数其他... 真的希望在发布之前先测试一下这个答案！（我不太可能做出一些大规模的语法错误！）

最后：我会关注i的范围 - 一旦你第三次点击，它可能会从0重新开始（再一次，我想测试的东西）！）所以我也把它放在图表对象中自己的变量中。

因此...

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;
}

Highcharts股票动画

1 个答案: