显示基于复选框选择的图表-高图表

Question

我有三个图表，现在，所有三个图表都默认显示。我希望根据我单击的复选框来显示它们。

document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
checkbox.addEventListener('change', (e) => {
const id = e.target.dataset.id,
checked = e.target.checked,
checkedCheckboxes = document.querySelectorAll('#checkboxes input:checked').length,
})
})

请找到小提琴：https://jsfiddle.net/uL3qz5tm/

默认情况下(加载时(应显示第一个图表。如果选中图表1和图表2，则必须显示图表一和图表二。如果选中了所有三个复选框，则必须显示所有三个图形。若所有三个复选框都未选中，则页面必须为空。

我已经注释掉了我尝试过的代码(在->根据复选框选择显示图表下(，它们效率不高，或者行为完全符合我的要求。

如果有人能帮我，我将不胜感激。

Answer 1

您可以在切换复选框时更改隐藏/可见的样式。

let chart1 = Highcharts.chart('container1', {
series: [{
data: [1, 2, 3, 4, 5, 6, 7]
}],
});
let chart2 = Highcharts.chart('container2', {
series: [{
data: [1, 2, 3, 4, 5, 6, 7].reverse()
}],
});
let checkbox1 = document.getElementById('checkbox1');
let container1 = document.getElementById('container1');
checkbox1.addEventListener('change', () => {
if (container1.style.visibility == 'hidden') {
container1.style.visibility = 'visible';
} else {
container1.style.visibility = 'hidden';
}
})
container2.style.visibility = 'hidden';
checkbox2.addEventListener('change', () => {
if (container2.style.visibility == 'hidden') {
container2.style.visibility = 'visible';
} else {
container2.style.visibility = 'hidden';
}
})

现场演示：https://jsfiddle.net/BlackLabel/ju2Ld7c1/1/