时间戳

首页 > 解决方案 > 如何使用复选框显示或隐藏 RGraph 折线图上的数据点？

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

问题描述

我正在尝试使用基于复选框的画布方法在 Rgraph 折线图上显示/隐藏数据点。用于创建图表的 javascript 在这里。我不能在这里添加完整的代码，因为它太长了。 带有复选框的图表图像

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


                });

标签： javascriptrgraph

解决方案

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

一个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>

推荐阅读