如何通过JavaScript清除Plotly旧图表后重新绘制新图表？

核心原因 #

旧图表实例未被正确销毁，直接创建新图表会导致DOM叠加；而清空整个chart div会连Grid.js表格一起删掉，因为表格也在这个容器内。

分步解决方案 #

• 保存图表实例引用，更新前销毁旧实例
  不管用的是Chart.js还是其他图表库，初始化时务必保留实例引用，更新数据前先销毁旧实例，避免叠加：

  // 全局保存图表实例
  let activeChart;
  
  // 初始化图表函数
  function renderChart(data) {
    // 假设图表渲染在chart容器内的canvas上
    const canvas = document.querySelector('#chart canvas');
    // 先销毁旧实例
    if (activeChart) {
      activeChart.destroy();
    }
    // 创建新图表
    activeChart = new Chart(canvas, {
      type: 'bar', // 替换成你的图表类型
      data: {
        labels: data.map(item => item[0]),
        datasets: [{
          label: '数据',
          data: data.map(item => item[1])
        }]
      }
    });
  }
  
  // Ajax请求新数据后更新图表
  fetch('/api/data')
    .then(res => res.json())
    .then(newData => {
      renderChart(newData); // 传入新数据渲染
    });
  

• 拆分容器，避免误删表格
  把图表和Grid.js表格分别放在chart div的子容器里，这样清空图表时不会影响表格：

  <div id="chart">
    <div id="chart-wrapper"></div> <!-- 专门放图表 -->
    <div id="table-wrapper"></div> <!-- 专门放Grid.js表格 -->
  </div>
  

  初始化图表时指向chart-wrapper，清空时只操作这个子容器：

  // 清空图表容器（仅清空图表，保留表格）
  document.getElementById('chart-wrapper').innerHTML = '';
  

• Grid.js渲染注意事项
  初始化Grid.js时指定渲染到table-wrapper容器，确保和图表容器完全分离：

  new Grid({
    columns: ['标签', '数值'],
    data: initialTableData
  }).render(document.getElementById('table-wrapper'));
  

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