JSReport 3.4.1中基于API数据动态生成Chart.js图表的问题

环境与需求 #

• 使用JSReport 3.4.1 + Chart.js 3.8.0
• 根据数据库参数动态生成数量不固定的图表，数据通过服务器API获取

问题现象 #

通过jQuery动态创建DOM并注入时遇到以下异常：

• 首个图表展示的数据与预期不符
• 第二个图表完全无法显示

原模拟代码示例 #

<div id="charts-container"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
<script>
// 模拟API返回的图表数据
const chartDataList = [
  { label: '图表1', data: [10, 20, 30, 40] },
  { label: '图表2', data: [5, 15, 25, 35] }
];

// 原错误实现：同一循环内完成DOM创建与图表初始化
$(document).ready(function() {
  chartDataList.forEach(item => {
    // 创建canvas元素并插入容器
    const $canvas = $('<canvas></canvas>').attr('id', `chart-${item.label}`);
    $('#charts-container').append($canvas);
    
    // 直接初始化图表
    new Chart($canvas[0], {
      type: 'bar',
      data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{
          label: item.label,
          data: item.data
        }]
      }
    });
  });
});
</script>

解决方案 #

将DOM元素创建与图表初始化拆分为两个独立循环，同时借助JSReport的window.JSREPORT_READY_TO_START标识，确保所有图表渲染完成后再触发打印/导出流程：

<div id="charts-container"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
<script>
const chartDataList = [
  { label: '图表1', data: [10, 20, 30, 40] },
  { label: '图表2', data: [5, 15, 25, 35] }
];

$(document).ready(function() {
  // 第一步：批量创建所有canvas元素并注入DOM
  chartDataList.forEach(item => {
    const $canvas = $('<canvas></canvas>').attr('id', `chart-${item.label}`);
    $('#charts-container').append($canvas);
  });

  // 第二步：基于已挂载的canvas初始化图表
  chartDataList.forEach(item => {
    const canvas = document.getElementById(`chart-${item.label}`);
    new Chart(canvas, {
      type: 'bar',
      data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{
          label: item.label,
          data: item.data
        }]
      }
    });
  });

  // 通知JSReport页面已完全就绪，可开始处理
  window.JSREPORT_READY_TO_START();
});
</script>

关键修复点 #

1. 拆分循环：确保canvas元素完全插入文档流后再初始化图表，避免Chart.js读取未挂载的DOM节点导致渲染异常
2. 就绪信号：window.JSREPORT_READY_TO_START()是JSReport的核心机制，用于等待所有动态内容（包括异步渲染的图表）加载完成后再执行导出，彻底解决内容缺失问题

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