如何解决如何使用复选框在 RGraph 折线图上显示或隐藏数据点？
我正在尝试使用基于复选框的画布方法在 rgraph 折线图上显示/隐藏数据点。 The javascript for creating the chart is here。我无法在此处添加完整代码，因为它太长了。 Image of Chart with checkboxes
// Check for selected data point
$('#textBox1').val("CheckBox is checked.");
$("#dbp").change(function() {
if($(this).prop("checked") == true){
$('#textBox1').val("CheckBox is checked.");
var data = [bpdnum,bpsnum,bpstarget,oxygennum,oxygentarget,pulsenum,pulsetarget,respnum,tempnum,weightnum];
var key = ['DBP','SBP','SBP-Target','Pox(%)','Pox-Target','HR','HR-Target','Respiration','Temp(F)','Weight'];
var colors = ['#751fd6','#ff59cc','rgba(255,89,204,0.6)','#40a808','rgba(64,168,8,'#0062cc','rgba(0,98,'#d6a41f','#78a730','#595959'];
console.log(data);console.log(key);console.log(colors);
// rgraph.clear(document.getElementById("allchart"));
// rgraph.redraw(document.getElementById("allchart"));
return drawGraph();
} else if($(this).prop("checked") == false){
$('#textBox1').val("CheckBox is unchecked.");
var data = [bpsnum,weightnum];
var key = ['SBP','Weight'];
var colors = ['#ff59cc','#595959'];
console.log(data);console.log(key);console.log(colors);
// rgraph.clear(document.getElementById("allchart"));
// rgraph.redraw(document.getElementById("allchart"));
return drawGraph();
}
});
解决方法
我通过 Twitter 使用以下代码回答了这个问题，该代码使用复选框显示或隐藏线上的一个点。代码将点值设置为 null。
代码笔在这里：
https://codepen.io/rgraph/pen/poErxRL
源代码是这样的：
<!DOCTYPE html >
<html lang="en">
<head>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="https://www.rgraph.net/libraries/RGraph.line.js" ></script>
</head>
<body>
<input type="checkbox" id="myCheckbox" checked /><label for="myCheckbox">Show/Hide point</label><br />
<canvas id="cvs" width="750" height="300" style="border: 1px solid gray">[No canvas support]</canvas>
<script>
myLine = new RGraph.Line({
id: 'cvs',data: [8,6,4,-3,-5,-8,2],options: {
xaxisPosition: 'center'
}
}).trace();
document.getElementById('myCheckbox').onclick = function (e)
{
if (this.checked) {
myLine.original_data[0][3] = -3 ;
} else {
myLine.original_data[0][3] = null;
}
// Must redraw the chart to see the changes
RGraph.redraw();
}
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。