如何使用 canvas js 在特定条件下停止绘制实时图表

Question

这是绘制实时图表的代码。它是根据概率绘制的。我想在满足条件后立即退出图表的绘制。

<script>
window.onload = function () 
{

    var dps = []; // dataPoints
    var chart = new CanvasJS.Chart("chartContainer", {
        title :{
            text: "Dynamic Data"
        },
        axisY: {
            includeZero: false
        },      
        data: [{
            type: "line",
            dataPoints: dps
        }]
    });

    var xVal = 0;
    var yVal = 100; 
    var updateInterval = 1000;
    var dataLength = 20; // number of dataPoints visible at any point
    var weights = [0.7, 0.3]; // probabilities
    var results = [1, 50];//values to plot
    var y=[];
    var updateChart = function (count) 
    {
        count = count || 1;
        for (var j = 0; j < count; j++) 
        {
            yVal =  getRandom();
            y.push(yVal)//push to array y
            dps.push({
                x: xVal,
                y: yVal
            });
            xVal++;
        }

        if (dps.length > dataLength) 
        {
            dps.shift();
        }

        if((y.length>4) && (y[y.length-2]==50) && (y[y.length-1]==50) )//condition to exit
        {
            myFunction();
        }

        chart.render();
    };

    updateChart(dataLength);//function call
    setInterval(function(){updateChart()}, updateInterval);

 // returns 1 or 50 based on probability given above.

    function getRandom () 
    {
        var num = Math.random(),
            s = 0,
            lastIndex = weights.length - 1;

        for (var i = 0; i < lastIndex; ++i) {
            s += weights[i];
            if (num < s) {
                return results[i];
            }
        }

        return results[lastIndex];
    };

    function myFunction() {
        alert("I am an alert box!");//alert and should exit the plot
        //code to be written 
    }

}
</script>

图表是连续绘制的。有没有办法停止动态情节？如何在满足条件并遇到警报时停止绘图？

提前致谢。

Answer 1

您的图表通过 setInterval 每秒更新一次：

setInterval(function(){updateChart()}, updateInterval);

您可以使用 clearInterval "unset" 这个间隔，但是您需要为此设置间隔 ID，您可以通过 setInterval 获得它：[1]

var intervalId = setInterval( updateChart, updateInterval );

然后，当您的条件为真时（检查 updateChart）：

clearInterval( intervalId );

[1] 有关 clearInterval 的更多信息：https://www.w3schools.com/jsref/met_win_clearinterval.asp

如何使用 canvas js 在特定条件下停止绘制实时图表

How to stop plotting a live graph on a certain condition using canvas js

javascript

html

canvasjs