javascript - RGraph 通过单击关键元素隐藏线和标签

Question

所以，我有一个像这样的图表:

我想要实现的是当我单击引用该行的键时隐藏该行及其标签。

我找到了this在文档上，我尝试这样做:

$(line.canvas).on('click', function (e) //line is the name of the graph of both green and red lines
        {
            var key = RGraph.Registry.get('key-element');
            console.log(key);

            if (key) {
                console.log("true");
            }
        });

我发现这是毫无意义的，因为当我单击这些键时，它们会返回奇怪的输出，要么 null 要么是与我想要的不同的其他键。

我还在RGraph Line API上发现了什么是 obj.hide([index]) 仅将颜色设置为 rgba(0,0,0,0)，不会隐藏 labelsAbove 属性。

如何解决此问题并在单击按键时正确隐藏线条？

Answer 1

这个演示隐藏/显示了该行，但 labelsAbove 标签仍然存在。所以我必须在下一个测试版中考虑这一点。

代码如下:

function createandcall(rackname, racknameid, stb) {
    $('#maintable').append('<table class="table"><tbody><tr style="text-align:center"><td><h2>' + rackname + '</h2><table class="table"><tbody style="text-align:left"><tr id="STBL"></tr><tr id="STBL1"></tr><tr id="STBL2"></tr><tr id="STBL3"></tr></tbody></table></td></tr></tbody></table>');
    for (i = 1; i < stb + 1; i++) {
        createtable(i);
        callstb(rackname, racknameid, i);
    }
    return;
}

function callstb(rackname, racknameid, i) {

    $.ajax({
        type: "GET",
        dataType: 'text',
        url: "http://localhost:3000/index/" + rackname + ' ' + racknameid + ' ' + i,
        success: function (data) {
            response = '\#stb' + i;
            idtd = '\#tdstb' + i;
            $(response).html(data.replace(/\[32m/gi, '').replace(/\[0\;33m/gi, '').replace(/\[0m/gi, '').replace(/\[33m/gi, '').replace(/\[37m/gi, '').replace(/\[31m/gi, ''));
            pre = $(response).html().toString();

        },
        error: function (error) {
            $("#error").html('Error trying to get the STBs report');
            $("#error").show();
        }
    })
}

服务器.js:

app.get('/index/*', (req, res) => {
    parsedparam = req.params[0].split(" ")
    rackname = parsedparam[0]
    racknameid = parsedparam[1]
    stb = parseInt(parsedparam[2])
    verifystbs(rackname, racknameid, stb, res);
});

function openconnection() {
    con.connect(() => { console.log("RackChecker connected with database!") });
}

function closeconnection() {
    con.end(() => { console.log("Connection Closed") });
}

function verifystbs(rackname, racknameid, stb, res) {
    openconnection();
    con.query("SELECT (SELECT UCASE(name) FROM models WHERE s.model = id) as Model,\
        (SELECT UCASE(name) FROM manufacturers WHERE s.manufacturer = id) as Branch,\
        (SELECT UCASE(name) FROM racks WHERE s.rack = id) as Rack,\
        s.name as Stb,\
        x.pr as Jira, \
        x.reason as Reason,\
        x.requestor AS Stress_Request,\
        x.version as Version\
        FROM \
        stbs s \
        LEFT JOIN \
        stressrun x \
        ON (s.active = 1 && s.rack = (SELECT id FROM racks WHERE name = '"+ racknameid + "')) \
        WHERE x.id = (SELECT max(id) FROM stressrun y WHERE y.stb_id = s.id) and s.name like ('STB_%"+ stb + "')\
        and x.reason in ('failed','other','new build') ORDER BY s.name;", (err, result) => {
        console.log(result)
        if (!Array.isArray(result) || !result.length) {
            callnewstb = shell.exec('./shellscript/callnewstb.sh ' + rackname + ' ' + stb, { async: true });
            callnewstb.stdout.on('data', (data) => {
                res.send(data);
            });
        }
        else {
            for (i = 0; i < result.length; i++) {
                parsestbnumber = result[i].Stb.split("_");
                stbnumber = parseInt(parsestbnumber[1]);
                stbnumber = stbnumber * 1;
                if (stb == stbnumber) {
                    res.send("Stress Test is not running on <b>" + result[i].Stb + "</b><br>Reason: <b>" + result[i].Reason + "</b><br>Jira Ticket: <b><a href='https://link.jira.com/browse/" + result[i].Jira + "'>" + result[i].Jira + "</a></b><br>Build Version: <b>" + result[i].Version)
                    break
                }
                else {
                    callnewstb = shell.exec('./shellscript/callnewstb.sh ' + rackname + ' ' + stb, { async: true });
                    callnewstb.stdout.on('data', (data) => {
                        res.send(data);
                    })
                }
            }
        }
    });
    closeconnection();
}