使用jQuery加载Chart.js图表到Bootstrap模态框不显示如何解决？

• Chart.js 渲染完成后，图表数据、交互逻辑和绘制内容都绑定在原页面canvas元素对应的Chart实例上，你使用.html()方法仅复制了canvas的静态标签结构，没有携带实例数据和画布内容，因此无法显示图表
• 复制后的canvas元素和原页面的canvas会出现ID重复，导致Chart实例绑定冲突
• 部分模态框初始化时为隐藏状态，直接在未渲染的隐藏DOM中插入图表，会因为无法获取正确宽高导致绘制失败

有两种可行方案，你可以根据需求选择：

方案一：复用Chart配置重新渲染（支持交互，推荐） #

这种方案可以保留图表的悬停提示、缩放等所有交互能力，性能和效果最好。

1. 先修改你的模态框结构，在内容区预留固定的canvas标签，避免动态复制DOM带来的ID冲突：

<div id="chartPopupModal" class="modal">
  <div class="modal-header">
    <h3 id="chart-title"></h3>
  </div>
  <div class="modal-body" id="chart-content">
    <canvas id="popupChartCanvas"></canvas>
  </div>
</div>

2. 初始化页面图表时，将所有Chart实例存储到全局对象中，方便后续调用：

// 全局存储容器，key为你原图表外层div的ID，value为对应的Chart实例
window.pageChartInstances = {}

// 示例：初始化页面图表时存入实例
const myChartCtx = document.getElementById('originChartCanvas').getContext('2d')
window.pageChartInstances['chartWrapper1'] = new Chart(myChartCtx, {
  // 你的图表原有配置
  type: 'line',
  data: {},
  options: {}
})

3. 修改你的弹窗触发函数：

window.showChartPopup = function(title, id){
  jQuery.noConflict();
  const $modal = $("#chartPopupModal");
  $modal.find('#chart-title').text(title);
  // 先显示模态框，保证DOM渲染完成能拿到正确宽高
  $modal.modal('show');

  // 销毁弹窗中之前存在的旧图表实例，避免冲突和内存泄漏
  if(window.popupChartInstance) window.popupChartInstance.destroy();

  // 拿到目标图表的配置，在弹窗canvas上重新渲染
  const targetChartConfig = window.pageChartInstances[id].config;
  const popupCtx = document.getElementById('popupChartCanvas').getContext('2d');
  window.popupChartInstance = new Chart(popupCtx, {
    ...targetChartConfig,
    options: {
      ...targetChartConfig.options,
      responsive: true,
      maintainAspectRatio: true
    }
  });
}

方案二：转成图片插入弹窗（无交互，实现简单） #

如果不需要弹窗中的图表有交互能力，可以直接把原canvas转成图片插入弹窗，实现成本最低：

window.showChartPopup = function(title, id){
  jQuery.noConflict();
  const $modal = $("#chartPopupModal");
  $modal.find('#chart-title').text(title);
  // 拿到原图表的canvas元素，转成图片
  const originCanvas = $(`#${id}`).find('canvas')[0];
  const chartImg = originCanvas.toDataURL('image/png');
  // 插入图片到弹窗内容区
  $modal.find('#chart-content').html(`<img src="${chartImg}" style="width:100%;height:auto;" alt="chart">`);
  $modal.modal('show');
}

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