RGraph 隐藏线加上点击关键元素的标签
RGraph hide line plus labels with a click on key element
所以,我有这样的图表:
我想要实现的是当我点击指向该行的键时隐藏这些行和标签。
我在文档中找到了 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");
}
});
我发现这是毫无意义的,因为当我点击按键时,它们 return 奇怪的输出,null
或与我想要的不同的其他按键。
我在RGraph Line API上还发现,obj.hide([index])
只设置颜色为rgba(0,0,0,0)
,并没有隐藏labelsAbove
属性。
如何解决这个问题并在我单击该键时正确隐藏线条?
好吧,这个演示 hides/shows 行,但 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();
}
})
}
server.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();
}
所以,我有这样的图表:
我想要实现的是当我点击指向该行的键时隐藏这些行和标签。
我在文档中找到了 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");
}
});
我发现这是毫无意义的,因为当我点击按键时,它们 return 奇怪的输出,null
或与我想要的不同的其他按键。
我在RGraph Line API上还发现,obj.hide([index])
只设置颜色为rgba(0,0,0,0)
,并没有隐藏labelsAbove
属性。
如何解决这个问题并在我单击该键时正确隐藏线条?
好吧,这个演示 hides/shows 行,但 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();
}
})
}
server.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();
}