使用jQuery与Plotly.js实现下拉选择仅绘制新图表的问题

我之前做项目时也碰到过一模一样的状况——用下拉切换Plotly图表时，新线条总是叠在旧图上面，用jQuery的empty()清空容器也没生效。其实Plotly本身就提供了更适配的解决方案，不用硬怼DOM操作：

方法一：用Plotly.react()直接更新图表（推荐） #

Plotly的react()方法专门用来更新现有图表实例，它会对比新的数据和布局，自动替换旧内容，而不是叠加绘制。这是官方推荐的图表更新方式，比清空DOM再重新渲染高效得多。

示例代码： #

<!-- Bootstrap下拉组件 -->
<select id="chart-switcher" class="form-select">
  <option value="dataset1">数据集1</option>
  <option value="dataset2">数据集2</option>
</select>
<!-- 图表容器 -->
<div id="plot-container"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 预设不同数据集
  const datasets = {
    dataset1: [{
      x: [1,2,3,4],
      y: [10,20,15,25],
      type: 'scatter',
      name: '数据集1'
    }],
    dataset2: [{
      x: [1,2,3,4],
      y: [5,18,12,30],
      type: 'scatter',
      name: '数据集2'
    }]
  };

  // 初始布局
  const layout = {
    title: '可切换折线图',
    xaxis: { title: 'X轴' },
    yaxis: { title: 'Y轴' }
  };

  // 初始化第一个图表
  Plotly.newPlot('plot-container', datasets.dataset1, layout);

  // 下拉切换事件
  $('#chart-switcher').on('change', function() {
    const selectedData = datasets[$(this).val()];
    // 用react更新图表，自动替换旧内容
    Plotly.react('plot-container', selectedData, layout);
  });
</script>

方法二：用Plotly.purge()彻底清除旧图表 #

如果你坚持要先清空再重绘，别用jQuery的empty()，试试Plotly自带的purge()方法——它会彻底清除容器内的Plotly实例和相关DOM元素，比普通的DOM清空更适配Plotly的渲染机制。

示例代码： #

$('#chart-switcher').on('change', function() {
  const selectedData = datasets[$(this).val()];
  // 先清除旧图表实例
  Plotly.purge('plot-container');
  // 重新绘制新图表
  Plotly.newPlot('plot-container', selectedData, layout);
});

为什么empty()没生效？ #

大概率是你调用empty()的时机不对：比如你先调用了Plotly.newPlot()，之后才清空容器，这时候Plotly已经把新图表渲染出来了；或者Plotly的渲染是异步的，empty()执行时旧图表还没完全加载，导致清空不彻底。用上面两种Plotly原生方法就能避开这些问题。

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