如何更新SmoothieChart中的数据而不发送TimeSeries中的第二个值?

时间:2017-12-01 10:43:22

标签: javascript json smoothie.js

我想使用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”意味着可用金额。我从其他人那里得到了这个代码,我应该“修复”它。这就是为什么它部分用德语。

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"});
}

我可以很好地渲染图形,我甚至可以获得显示时间戳以及价格和时间的叠加层。不幸的是,它会使覆盖层中的价格大幅下降,从而使网站速度下降得非常快。删除叠加层并不能解决问题,因为价格是不间断附加的 我标记的那个地方。我不知道如何保持数据更新和图表绘制,而不会发送垃圾邮件。

1 个答案:

答案 0 :(得分:0)

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

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));
}