Question

我有一个堆积条形图，它从api获取数据。它在加载时工作正常，数据显示应该是。

现在我希望每十分钟向图表中添加一个新数据，调用与加载时相同的API，图表应该异步刷新，并且新数据和轴标签需要在获得新数据时更新。

到目前为止我做了什么.. https://plnkr.co/edit/s2Os8UlpSbCWlkNP6wuA?p=preview

format1(parseInt($(this).text()), "$");

Answer 1

如果您使用jquery，则可以使用$.ajax function发送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;
        }
    };

}

如何将实时数据添加到堆积条形图

1 个答案: