使用Chart.js 3.9.4在同一Canvas绘制动态图表失效问题求助

核心问题 #

Chart.js 3.x版本重构了实例管理机制，同一个Canvas元素不能重复绑定多个Chart实例。你在2.9.4中直接通过new Chart覆盖旧实例的方式，在3.9.4中会触发内部状态冲突，导致新图表无法渲染。此外，你的代码存在语法错误（new Chart调用未正确闭合括号），也会影响功能运行。

修复方案 #

方案1：销毁旧实例后重建 #

维护一个全局变量存储当前Chart实例，每次点击按钮时先销毁旧实例，再创建新实例：

// 全局存储图表实例
let myChartInstance = null;

$("#getGenderVote").on("click", function () {
  // 销毁已有实例
  if (myChartInstance) {
    myChartInstance.destroy();
  }
  // 创建新图表实例（推荐传入DOM元素而非ID）
  myChartInstance = new Chart(document.getElementById("myChart_j"), {
    type: "bar",
    data: {
      labels: xValues1,
      datasets: [
        {
          label: "Eligible Voters",
          backgroundColor: "Red",
          data: yValues1,
        },
        {
          label: "Accredited Voters",
          backgroundColor: "Yellow",
          data: yValues2,
        },
        {
          label: "Voted Voters",
          backgroundColor: "green",
          data: yValues3,
        },
      ],
    },
  });
});

$("#getSubRegion").on("click", function () {
  if (myChartInstance) {
    myChartInstance.destroy();
  }
  myChartInstance = new Chart(document.getElementById("myChart_j"), {
    type: "bar",
    data: {
      labels: subRegion,
      datasets: [
        {
          label: "Eligible Voters",
          backgroundColor: "Red",
          data: subElectorateCount,
        },
        {
          label: "Accredited Voters",
          backgroundColor: "Yellow",
          data: subRegionCount,
        },
        {
          label: "Voted Voters",
          backgroundColor: "green",
          data: subVotedCount,
        },
      ],
    },
  });
});

方案2：更新现有实例数据（更高效） #

无需销毁实例，直接修改现有实例的配置和数据，再调用update()方法刷新图表：

let myChartInstance = null;

// 封装图表配置更新逻辑
function updateChart(config) {
  if (myChartInstance) {
    // 更新配置与数据
    myChartInstance.config.type = config.type;
    myChartInstance.data = config.data;
    myChartInstance.update();
  } else {
    // 首次创建实例
    myChartInstance = new Chart(document.getElementById("myChart_j"), config);
  }
}

$("#getGenderVote").on("click", function () {
  updateChart({
    type: "bar",
    data: {
      labels: xValues1,
      datasets: [
        {
          label: "Eligible Voters",
          backgroundColor: "Red",
          data: yValues1,
        },
        {
          label: "Accredited Voters",
          backgroundColor: "Yellow",
          data: yValues2,
        },
        {
          label: "Voted Voters",
          backgroundColor: "green",
          data: yValues3,
        },
      ],
    },
  });
});

$("#getSubRegion").on("click", function () {
  updateChart({
    type: "bar",
    data: {
      labels: subRegion,
      datasets: [
        {
          label: "Eligible Voters",
          backgroundColor: "Red",
          data: subElectorateCount,
        },
        {
          label: "Accredited Voters",
          backgroundColor: "Yellow",
          data: subRegionCount,
        },
        {
          label: "Voted Voters",
          backgroundColor: "green",
          data: subVotedCount,
        },
      ],
    },
  });
});

额外注意事项 #

1. 语法修正：你原代码中new Chart的调用未正确闭合括号（缺少)），需确保每个new Chart(...)后以);结尾。
2. DOM元素传入：Chart.js 3.x推荐直接传入Canvas DOM元素（document.getElementById("myChart_j")）而非字符串ID，避免潜在的选择器冲突。

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