如何將實時數據添加到堆疊條形圖

我有一個堆疊條形圖，它從api獲取數據。它加載時工作正常，並且數據顯示爲它應該。如何將實時數據添加到堆疊條形圖

現在我希望每十分鐘向圖表添加新數據，調用與加載時相同的API，圖表應該異步刷新，並且新數據和軸標籤需要隨着新數據的更新而更新。

我迄今所做.. https://plnkr.co/edit/s2Os8UlpSbCWlkNP6wuA?p=preview

var ma = d3.line() 
     .x(function(d) { return x(parseDate(d.date)); }) 
     .y(function(d) { return y(d.ma); });

來源

2016-10-11 Kevin Waterson

-1

如果你使用jQuery的，那麼你可以使用$.ajaxfunction發送一個AJAX請求。請確保您處理結果done()function中的響應，因爲success已棄用。

平原AJAX請求例如：

HTML：

<!DOCTYPE html> 
<html> 
<body> 

<div id="demo"><h2>Let AJAX change this text</h2></div> 

<button type="button" onclick="loadDoc()">Change Content</button> 

</body> 
</html>

JS：

function loadDoc() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    document.getElementById("demo").innerHTML = this.responseText; 
    } 
    }; 
    xhttp.open("GET", "ajax_info.txt", true); 
    xhttp.send(); 
}

從here兩者。如果您掌握了AJAX請求，那麼下一步就是使用setInterval編寫一個輪詢器。第一個參數應該是發送請求的function，第二個參數應該是兩次執行之間的毫秒數（在這種情況下爲10000）之間的時間。或者你可以使用現有的輪詢器。這是我實施的一個：

function Initializable(params) { 
    this.initialize = function(key, def, private) { 
     if (def !== undefined) { 
      (!!private ? params : this)[key] = (params[key] !== undefined) ? params[key] : def; 
     } 
    }; 
} 

function Poller(params) { 
    Initializable.call(this, params); 

    var that = this; 
    this.initialize("url", window.location.href); 
    this.initialize("interval", 5000); 
    this.initialize("type", "POST"); 
    this.initialize("method", "POST"); 
    this.initialize("data", {}); 
    this.initialize("strict", true); 

    var defaultFunction = function() {}; 

    this.initialize("done", defaultFunction); 
    this.initialize("fail", defaultFunction); 
    this.initialize("always", defaultFunction); 

    this.isRunning = function() { 
     return !!params.intervalID; 
    }; 

    this.run = function() { 
     if (this.strict && (this.green === false)) { 
      return; 
     } 
     this.green = false; 
     $.ajax({ 
      url: this.url, 
      method: this.method, 
      data: this.data 
     }).done(function(data, textStatus, jqXHR) { 
      that.green = true; 
      that.done(data, textStatus, jqXHR); 
     }).fail(function(jqXHR, textStatus, errorThrown) { 
      that.green = true; 
      that.fail(jqXHR, textStatus, errorThrown); 
     }).always(function(param1, param2, param3) { 
      that.green = true; 
      that.always(param1, param2, param3); 
     }); 
    }; 

    this.start = function() { 
     if (!params.intervalID) { 
      this.run(); 
      params.intervalID = setInterval(this.run.bind(this), this.interval); 
     } 
    }; 

    this.stop = function() { 
     if (!!params.intervalID) { 
      clearInterval(params.intervalID); 
      params.intervalID = undefined; 
     } 
    }; 

}

來源

2016-10-11 06:19:48

我可以請求downvoter告訴我他爲什麼downvote我的答案？ –

如何將實時數據添加到堆疊條形圖

回答

相關問題