基于复选框选择显示Highcharts图表的实现需求

架构老林

2026-8-15

解决Highcharts图表复选框控制显示问题

核心实现思路

给每个图表容器设置唯一ID，与对应复选框的value值绑定
页面初始化时仅显示第一个图表，隐藏另外两个
监听复选框的状态变化，批量控制对应图表的显示/隐藏

完整代码示例

HTML结构

<div class="checkbox-group">
  <label><input type="checkbox" name="chart-switch" value="chartOne" checked> Chart 1</label>
  <label><input type="checkbox" name="chart-switch" value="chartTwo"> Chart 2</label>
  <label><input type="checkbox" name="chart-switch" value="chartThree"> Chart 3</label>
</div>

<div id="chartOne" class="chart-box"></div>
<div id="chartTwo" class="chart-box" style="display: none;"></div>
<div id="chartThree" class="chart-box" style="display: none;"></div>

JavaScript逻辑

// 初始化三个Highcharts图表（保留你原有的图表配置）
const chart1 = Highcharts.chart('chartOne', {
  title: { text: 'Chart One' },
  series: [{ data: [12, 24, 18, 30, 22] }]
});

const chart2 = Highcharts.chart('chartTwo', {
  title: { text: 'Chart Two' },
  series: [{ data: [8, 16, 12, 20, 14] }]
});

const chart3 = Highcharts.chart('chartThree', {
  title: { text: 'Chart Three' },
  series: [{ data: [5, 10, 15, 25, 20] }]
});

// 监听复选框状态变化
document.querySelectorAll('input[name="chart-switch"]').forEach(box => {
  box.addEventListener('change', () => {
    // 先隐藏所有图表容器
    document.querySelectorAll('.chart-box').forEach(box => {
      box.style.display = 'none';
    });
    // 显示所有被勾选的对应图表
    document.querySelectorAll('input[name="chart-switch"]:checked').forEach(checkedBox => {
      document.getElementById(checkedBox.value).style.display = 'block';
    });
  });
});