Блог

Причина в том, что Google Chart JS берет данные с помощью Ajax из предоставленного flask API. Функция setInterval() помогает мне иметь живой график, который обновляется данными flask. Цель состоит в том, чтобы дополнительно иметь кнопку, которая остановила бы этот живой процесс, но сохранила бы текущий график с текущими данными (без обновления страницы). До сих пор я успешно выполнял живой график, но изо всех сил пытался остановить живой график с текущими данными.

Что приходит мне в голову, так это вызвать myStopFunction() внутри функции drawChart нажатием кнопки, как указано в html, но она продолжает обновляться.

graph.json

 function drawChart() {
    ...
    var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
    chart.draw(data, options);


    function importData(){$.ajax({
        url: '/update',
        type: 'POST',
        success: function(data) {
            result = data.value;},
        error: function(error) {
            console.log(error);}
        });
        return result}
   
        var index = 0;
        function addData(){
            results = importData()
            //console.log(result)
            data.addRow([index, result, result 0.5]);
            chart.draw(data, options);
            index  ;
        }
        var myVar = setInterval(addData, 1000); 

        function myStopFunction() {
            clearInterval(myVar);
          }      
    }
 

views.py

 @app.route('/update', methods=['POST'])
def update():
    data = random()
    return  jsonify({
        'value': data})
 

index.html

 ...
    <!-- live graph -->
    <div id="chart_div"></div>
    <button onclick="drawChart.myStopFunction();">Stop</button>​
 ...
 

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, чтобы прояснить проблему, или это должно быть сделано другим способом.

Вы должны присвоить переменной interval глобальную область видимости, чтобы к ней можно было получить доступ из других функций. Смотрите следующий фрагмент кода:

 let interval = null // declaring variable interval outside

function drawChart() {
  function addData(){
      console.log("adding data")
  }

  interval = setInterval(addData, 1000); //assigning value to interval variable
}

function myStopFunction() {
  if(interval) {
    console.log("stopping interval")
    clearInterval(interval); //clearing interval if existent
  }
 
}
    
drawChart() 

 <button onclick="myStopFunction();">Stop</button> 

Вы получаете сообщение об ошибке в консоли? Кроме того, может ли быть так, что окончание } функции drawChart должно быть изменено таким образом, чтобы другие функции не находились внутри вашей функции drawChart?