在Chart.js中使用复选框选择特定线时,隐藏线也可见

时间:2019-05-13 12:39:11

标签: javascript html html5 html5-canvas chart.js

我正在尝试使用复选框来选择在Chart.js图表​​中显示哪些行。如果选中复选框,则会显示一个图表。如果然后显示另一行,则显示两行。但是,如果光标在图表周围移动,则也可以看到只有一行的原始图表。任何帮助将不胜感激。

当选择一行时,它看起来像this。 选择另一行时,它看起来像this。 移动鼠标时,也可以看到this。可以显示原始画布吗?

getLineSet = () => {
            let lineSet = []

            if (document.getElementById("open").checked) {
                lineSet.push(createLine("Open", 34, 139, 34, open));
            }
            if (document.getElementById("high").checked) {
                lineSet.push(createLine("High", 0, 191, 255, high));
            }
            if (document.getElementById("low").checked) {
                lineSet.push(createLine("Low", 178, 34, 34, low));
            }
            if (document.getElementById("close").checked) {
                lineSet.push(createLine("Close", 75, 192, 192, close));
            }
            displayCanvas(ctx, lineSet);

        }

displayCanvas = (ctx, lineSet) => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: keys,
                    datasets: lineSet
                }
            });
        }

0 个答案:

没有答案