如何使用复选框显示或隐藏 RGraph 折线图上的数据点？答案

【问题标题】：How to show or hide a data point on RGraph Line chart using checkbox?如何使用复选框显示或隐藏 RGraph 折线图上的数据点？
【发布时间】：2020-12-21 18:24:14
【问题描述】：

我正在尝试使用基于复选框的画布方法在 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, 0.6)','#0062cc','rgba(0, 98, 204, 0.6)','#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,bpstarget,oxygennum,oxygentarget,pulsenum,pulsetarget,respnum,tempnum,weightnum];
                        var key = ['SBP','SBP-Target','Pox(%)','Pox-Target','HR','HR-Target','Respiration','Temp(F)','Weight'];
                        var colors = ['#ff59cc','rgba(255, 89, 204, 0.6)','#40a808','rgba(64, 168, 8, 0.6)','#0062cc','rgba(0, 98, 204, 0.6)','#d6a41f','#78a730','#595959'];
                        console.log(data);console.log(key);console.log(colors);
                        // RGraph.clear(document.getElementById("allchart"));
                        // RGraph.redraw(document.getElementById("allchart"));
                        return drawGraph();
                    }


                });

【问题讨论】：

如果我在这里添加实际的 JS 代码。由于某种原因，它显示整个帖子都一团糟。不过很好，我会添加它，你会看到的。
这是我尝试在此处添加 JS 时收到的消息“看起来您的帖子主要是代码；请添加更多详细信息。”
听起来您正在尝试添加一堆代码，而不仅仅是演示您遇到问题的部分。我们不需要代码转储。将您的代码减少到仅显示您的问题的行。复选框，您如何将事件绑定到该复选框，以及您如何尝试显示或隐藏数据点。

标签： javascript rgraph

【解决方案1】：

我通过 Twitter 使用以下代码回答了这个问题，该代码使用复选框显示或隐藏了线上的一个点。代码将 points 值设置为 null。

这里有一个codepen：

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>

【讨论】：

这似乎有效，但是我需要隐藏整个集合。例如，在 json 数组中有一个名为 bpdnum 的数据节点。我想完全隐藏它，而不仅仅是某个点。
我添加了我想要做的截图。
如果您想显示/隐藏整个数据集而不是单个数据点，那么可以使用 show() 和 hide() 方法为您执行此操作。我已经用第二个图表更新了示例代码笔，该图表具有多个数据集并允许您显示或隐藏其中一个。 codepen.io/rgraph/pen/poErxRL
下载中还有一个名为 demos/line-hide-show.html 的演示，它就是这样做的。你可以在这里下载：rgraph.net/download.html#stable
好的，知道了。谢谢！！