勾选/取消勾选复选框时切换指定Highcharts图表显示状态

这个需求其实很常见，核心就是借助Highcharts提供的系列控制API，配合复选框的事件监听来实现。我给你整理了一套完整的实现方案，亲测好用：

1. 先搭好HTML结构 #

首先你需要把复选框组和图表容器准备好，建议让复选框的value和Highcharts里系列的name一一对应，这样后续匹配起来更直观：

<!-- 复选框控制组 -->
<div class="chart-toggle-group">
  <label><input type="checkbox" value="用户行为" checked> 用户行为</label>
  <label><input type="checkbox" value="系统指标" checked> 系统指标</label>
  <label><input type="checkbox" value="业务数据" checked> 业务数据</label>
</div>

<!-- Highcharts图表容器 -->
<div id="scatter-container" style="width: 800px; height: 450px;"></div>

2. 初始化Highcharts散点图 #

接下来初始化你的散点图，确保每个系列的name和复选框的value完全匹配：

// 初始化散点图实例
const scatterChart = Highcharts.chart('scatter-container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: '多系列散点图联动演示'
  },
  xAxis: {
    title: { text: '维度X' }
  },
  yAxis: {
    title: { text: '维度Y' }
  },
  series: [
    {
      name: '用户行为',
      data: [[12, 34], [23, 45], [34, 56], [45, 67]]
    },
    {
      name: '系统指标',
      data: [[15, 28], [27, 39], [39, 50], [51, 61]]
    },
    {
      name: '业务数据',
      data: [[18, 30], [29, 41], [40, 52], [53, 63]]
    }
  ]
});

3. 编写复选框的联动逻辑 #

最后就是监听复选框的change事件，找到对应的系列，调用setVisible()方法切换显示状态：

// 获取所有控制复选框
const toggleCheckboxes = document.querySelectorAll('.chart-toggle-group input[type="checkbox"]');

// 给每个复选框绑定切换事件
toggleCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 根据复选框value匹配对应的图表系列
    const targetSeries = scatterChart.series.find(series => series.name === this.value);
    
    // 找到系列后切换可见性，第二个参数true表示立即重绘图表
    if (targetSeries) {
      targetSeries.setVisible(this.checked, true);
    }
  });
});

额外优化小技巧 #

• 如果你的系列是按索引管理的，可以把复选框value设为系列索引（比如value="0"对应第一个系列），然后用scatterChart.series[this.value]直接获取，效率更高。
• 初始化时如果某个系列默认隐藏，记得把对应复选框的checked设为false，保持状态同步。
• 要是有大量系列需要批量切换，可以把setVisible()的第二个参数设为false，批量操作完后再调用scatterChart.redraw()，能提升性能。

这样就能完美实现勾选/取消复选框时，动态显示或隐藏对应的散点图系列啦！

内容的提问来源于stack exchange，提问作者Ted