如何在Highcharts基础折线图中移除动态添加的series？

核心原理 #

Highcharts没有提供chart.removeSeries()这类全局方法，而是每个Series实例自身带有remove()方法，调用该方法即可移除对应系列。

常见移除场景示例 #

1. 移除最后添加的系列

新添加的系列会追加到chart.series数组末尾，可直接获取最后一个元素调用移除方法：

$('#remove_last').click(() => {
    const lastSeries = chart.series[chart.series.length - 1];
    if (lastSeries) {
        lastSeries.remove();
    }
});

2. 按系列名称移除

遍历chart.series数组，匹配目标名称后移除对应系列：

$('#remove_by_name').click(() => {
    const targetName = 'New Series';
    chart.series.forEach(series => {
        if (series.name === targetName) {
            series.remove();
        }
    });
});

3. 按索引移除

直接通过数组索引定位系列并移除：

// 移除索引为5的系列（需确保该索引存在）
chart.series[5].remove();

完整修改后的代码示例 #

JavaScript部分

window.chart = Highcharts.chart('container', {
  title: {
    text: '美国太阳能就业岗位增长（2010-2020）'
  },
  subtitle: {
    text: '来源: IREC'
  },
  yAxis: {
    title: {
      text: '员工数量'
    }
  },
  xAxis: {
    accessibility: {
      rangeDescription: '范围: 2010 至 2020'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },
  series: [{
    name: '安装与开发',
    data: [43934, 48656, 65165, 81827, 112143, 142383,
      171533, 165174, 155157, 161454, 154610]
  }, {
    name: '制造',
    data: [24916, 37941, 29742, 29851, 32490, 30282,
      38121, 36885, 33726, 34243, 31050]
  }, {
    name: '销售与分销',
    data: [11744, 30000, 16005, 19771, 20185, 24377,
      32147, 30912, 29243, 29213, 25663]
  }, {
    name: '运营与维护',
    data: [null, null, null, null, null, null, null,
      null, 11164, 11218, 10077]
  }, {
    name: '其他',
    data: [21908, 5548, 8105, 11248, 8989, 11816, 18274,
      17300, 13053, 11906, 10073]
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }
});

$('#add_new').click(()=>{
    chart.addSeries({
        name: 'New Series',
        data: [5551,2233,33233,23232,23232,54223]
    });
})

// 移除最后一个系列
$('#remove_last').click(() => {
    const lastSeries = chart.series[chart.series.length - 1];
    if (lastSeries) {
        lastSeries.remove();
    }
})

// 按名称移除指定系列
$('#remove_by_name').click(() => {
    chart.series.forEach(series => {
        if (series.name === 'New Series') {
            series.remove();
        }
    });
})

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    <button id="add_new">添加新系列!</button>
    <button id="remove_last">移除最后一个系列!</button>
    <button id="remove_by_name">移除名称为New Series的系列!</button>
    基础折线图展示数据趋势，包含series-label模块，为每条线添加标签提升可读性。
  </p>
</figure>

CSS部分（保持原代码不变）

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

注意事项 #

• 调用remove()方法后，系列会从图表中彻底移除，包括图例、数据点等所有相关元素。
• 若需临时隐藏系列而非彻底删除，可改用series.hide()方法，后续通过series.show()可重新显示。

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