Highcharts多折线下拉切换异常：无法显示全部折线

问题分析 #

你当前的核心问题是选择「全部」选项时，没有正确将所有社区的折线数据赋值给图表的series，导致仅显示第一条折线；而默认设为全量数据时，单个社区切换逻辑未正确过滤出目标数据。

修复步骤 #

1. 修正下拉切换逻辑 #

在下拉菜单的change事件中，明确区分「全部」和单个社区的处理逻辑：

• 选中「全部」时，直接将完整的data数组（深拷贝后）赋值给图表的series
• 选中单个社区时，从data中筛选出对应名称的项作为series数据源

示例代码：

document.getElementById('communitySelector').addEventListener('change', function() {
  const selected = this.value;
  let newSeries;
  
  if (selected === 'all') {
    // 深拷贝完整数据，避免原数据被修改
    newSeries = structuredClone(data);
  } else {
    // 筛选对应社区的数据
    newSeries = [data.find(item => item.name === selected)];
  }
  
  chart.update({ series: newSeries });
});

2. 优化深拷贝方式 #

替换JSON.parse(JSON.stringify(...))为structuredClone()，这是更现代、安全的深拷贝方法，支持更多数据类型（如Date、Map），性能也更优。

3. 初始化图表默认配置 #

默认直接将data作为series初始值，确保页面加载时显示所有折线：

const chart = Highcharts.chart('container', {
  // 其他配置项...
  series: structuredClone(data)
});

关键原理 #

Highcharts的chart.update()方法会根据传入的series配置替换现有系列，只要确保传入的数组结构正确：

• 单个社区时是包含一个对象的数组
• 全部社区时是包含所有对象的完整数组

即可实现两种状态的正常切换。

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