如何更新 SmoothieChart 中的数据而不向 TimeSeries 中的第二个值发送垃圾邮件?

How do I update data in a SmoothieChart without spamming the the second value in TimeSeries?

我想使用 JSON

建立某种股票交易网站
function getJSON(_url, _type) {
    var request = new XMLHttpRequest();
    request.open("GET", _url, true);
    request.onload = function () {
        if (request.status == 200 && request.readyState == 4) {
            Callback(JSON.parse(request.responseText), _type);
        } else
            error("reach");
    };
    request.send(null);
}

以及获取数据的回调函数。

function Callback(_data, _type) {

    switch (_type) {
        case 1.1:
            initAktien(_data);
            break;
        case 1.2:
            updateAktien(_data);
            break;
    }
}

为了可视化我正在使用 SmoothieChart 的股票。

var lines = [];
var smoothie = new SmoothieChart({
    tooltip: true, millisPerPixel: 50, minValueScale: 0,
    grid: {fillStyle: '#99d6ff', strokeStyle: '#6c7d82', verticalSections: 8, borderVisible: false},
    labels: {disabled: true, fontSize: 9}, minValue: 0, horizontalLines: [{color: '#000000', lineWidth: 1, value: 0}, {color: '#4d0f00', lineWidth: 2, value: 100}]
});
smoothie.streamTo(document.getElementById("aktien-grafik"), 500);

如果您想知道,请注意:"Aktien" 表示库存,"preis" 表示价格,"anzahlVerfügbar" 表示可用数量。我从其他人那里得到了这段代码,我应该 "fix" 它。这就是为什么它部分是德语的。

function initAktien(_data) {
    var stocks = document.getElementById("aktien");
    var amount = document.getElementById("amount");

    for (var i = 0; i <= _data.length - 1; i++) {
        var stockoption = document.createElement("option");
        stockoption.innerHTML = _data[i].name;
        stocks.appendChild(stockoption);
    }

    for (var j = 1; j <= 5; j++) {
        var amountoption = document.createElement("option");
        amountoption.innerHTML = j;
        amount.appendChild(amountoption);
    }
}

function updateAktien(_data) {
    var select = document.getElementById("aktien").selectedIndex;
    document.getElementById("kurs").innerHTML = _data[select].preis;
    document.getElementById("anz").innerHTML = _data[select].anzahlVerfuegbar;

    //spam is because of here
    lines.push(new TimeSeries());
    lines[select].append(new Date().getTime(), _data[select].preis);
    smoothie.addTimeSeries(lines[select], {lineWidth: 2, strokeStyle: "#000000"});
}

我可以很好地渲染图表,甚至可以得到一个显示时间戳、价格和时间的叠加层。不幸的是,它会在覆盖层中发送垃圾邮件,从而使网站速度非常快。移除覆盖层并不能解决问题,因为价格是不停地附加的 在我标记的地方的某个地方。我不知道如何在不发送该值的情况下保持数据更新和图表绘制。

我认为这不是最好的解决方案,但它确实有效。有点冗余的代码。

function initAktien(_data) {
    var stocks = getID("aktien");
    var amount = getID("amount");

    for (var i = 0; i <= _data.length - 1; i++) {
        var stockoption = document.createElement("option");
        stockoption.innerHTML = _data[i].name;
        stocks.appendChild(stockoption);

        lines.push(new TimeSeries());
        lines[i].append(new Date().getTime(), _data[i].preis.toFixed(2));
        smoothie.addTimeSeries(lines[i], {lineWidth: 2, strokeStyle: "#000000"});
    }
}

function updateAktien(_data) {
    var select = getID("aktien").selectedIndex;
    getID("kurs").innerHTML = _data[select].preis.toFixed(2);
    getID("anz").innerHTML = _data[select].anzahlVerfuegbar;

    //Grafik update
    lines[select].append(new Date().getTime(), _data[select].preis.toFixed(2));
}