CanvasJS柱状图更新异常：新旧数据同时显示问题求助

我仔细看了你的代码和遇到的问题，核心问题出在全局数据数组未清空以及图表实例管理逻辑错误上，导致每次数据更新后新数据直接追加到旧数据后面，切换图表时旧实例也没被正确清理。下面给你一步步拆解解决：

1. 先清空全局数据，从根源避免新旧叠加 #

你的dp、target、colors都是全局变量，每次调用main更新数据时，旧数据还留在数组里，新数据直接push进去，自然会显示所有历史数据。在main函数开头先强制清空这些数组：

function main(results) {
  // 关键：每次更新数据前清空旧数组，确保数据集是全新的
  dp = [];
  target = [];
  colors = [];
  var count = 0;
  
  // 后面的日期处理、数据计算逻辑保持不变...
}

2. 正确管理图表实例：销毁旧实例再创建新的 #

原来的drawGraph里创建图表后马上调用destroy()，这等于刚创建就销毁，完全起不到清理旧图表的作用。我们需要维护一个全局的实例对象，切换图表时先销毁对应容器的旧实例，再清空容器DOM，最后创建新图表：

// 全局保存每个图表的实例，方便后续销毁
var chartInstances = {};

function drawGraph(containerId, chartType) {
  // 销毁当前容器的旧实例（如果存在）
  if (chartInstances[containerId]) {
    chartInstances[containerId].destroy();
    delete chartInstances[containerId];
  }
  
  // 彻底清空容器内容，避免残留旧图表DOM
  $("#" + containerId).empty();

  // 这里根据chartType选择对应的数据（你需要自己扩展三个图表的数据集，比如dp1、dp2、dp3）
  // 示例：假设chartType对应不同的数据集，你可以根据实际业务调整
  var currentDataPoints = dp; 
  var currentColors = colors;

  // 创建新图表实例
  var chart = new CanvasJS.Chart(containerId, {
    colorSet: "customChartColors", // 换个唯一名称避免颜色集冲突
    animationEnabled: true,
    backgroundColor: "rgba(163,121,143,0)",
    title: { text: "" },
    axisX: {
      interval: 1,
      intervalType: "day",
      valueFormatString: "MMM DD"
    },
    axisY: {
      stripLines: [{
        value: 80,
        showOnTop: true,
        lineDashType: "dash",
        color: "rgb(51,51,51)",
        thickness: 2
      }],
      includeZero: false,
      suffix: " %"
    },
    legend: { cursor: "pointer", fontSize: 16 },
    toolTip: { shared: true },
    data: [{
      name: "",
      type: "column",
      percentFormatString: "#0.##",
      dataPoints: currentDataPoints
    }]
  });

  // 直接覆盖同名颜色集，避免重复添加导致的冲突
  CanvasJS.addColorSet("customChartColors", currentColors);

  chart.render();
  // 保存当前实例，下次切换时销毁
  chartInstances[containerId] = chart;
}

3. 优化countdown的图表切换逻辑 #

原来的countdown逻辑有点冗余，改成循环计数的方式更清晰：

var count = 0; // 全局计数变量，避免重复声明
function countdown() {
  count = (count + 1) % 3; // 循环0、1、2，对应三个图表容器
  var currentContainer = idx.chartArr[count];
  drawGraph(currentContainer, count + 1); // 传递容器ID和图表类型标识
  setTimeout(countdown, 10000);
}

4. 补充：扩展三个图表的独立数据集 #

你原来的代码只生成了一组dp数据，但你有三个不同的图表，所以需要在main函数里分别生成对应三个图表的数据集（比如dp1、dp2、dp3），然后在drawGraph里根据chartType参数选择对应的数据集。这部分需要你根据实际业务逻辑调整，比如不同的计算规则或者不同的数据筛选条件。

为什么之前的方法没用？ #

• 移除容器再重建：如果全局数据数组没清空，新创建的图表还是会使用旧数据+新数据的混合数组
• destroy()调用时机错误：你是创建新图表后马上销毁，等于白创建，旧的图表实例根本没被处理
• 重置对象：但全局数组未清空，数据叠加的问题依然存在

按照上面的修改，应该就能彻底解决新旧数据同时显示的问题了。

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