高图表股票动画

Highcharts stock animation

本文关键字：动画 高图表      更新时间：2023-09-26

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

通过鼠标单击启动它相当容易。

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

可能有更好的方法来打包这一切，它可能需要一些按摩才能工作，因为我没有完整的示例来测试，但作为 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;
}
相关文章：