在jsreport（Handlebars+Chrome-PDF）中使用ApexCharts柱状图无内容问题

问题核心 #

你当前的问题出在数据格式不匹配，以及Chrome-PDF导出时未等待图表渲染完成：

• 原Completedcalls是单个键值对的对象数组，ApexCharts无法直接解析这种格式的series.data
• Chrome-PDF导出可能在图表渲染完成前就生成了PDF，导致图表内容为空

数据格式修正 #

原数据结构：

{"Completedcalls": [
    {"Bloemfontein": 2},
    {"Mafube": 5},
    {"Phumelela": 6},
    {"Total": 13}
]}

需要转换成ApexCharts支持的格式，同时提取x轴标签：

• 提取每个对象的键作为x轴分类（categories）
• 提取每个对象的值作为系列数据（series.data）

完整修正代码 #

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="myFirstChart"></div>
<script>
    // 读取并转换数据
    const rawData = {{{ReadData Completedcalls}}};
    const categories = [];
    const seriesData = [];

    rawData.forEach(item => {
        const [key, value] = Object.entries(item)[0];
        categories.push(key);
        seriesData.push(value);
    });

    const options = {
        chart: {
            type: 'bar',
            toolbar: { show: false }
        },
        plotOptions: {
            bar: { horizontal: false }
        },
        xaxis: {
            categories: categories // 配置x轴标签
        },
        series: [{
            name: '完成呼叫数',
            data: seriesData // 使用转换后的数值数组
        }]
    };

    const element = document.querySelector("#myFirstChart");
    const chart = new ApexCharts(element, options);

    // 渲染图表后通知jsreport可以开始生成PDF
    chart.render().then(() => {
        window.JSREPORT_READY_TO_START = true;
    });
</script>

关键说明 #

• 通过Object.entries(item)[0]提取每个对象的键和值，转换成图表需要的格式
• 添加xaxis.categories配置，显示每个条形对应的标签
• 使用chart.render().then()触发window.JSREPORT_READY_TO_START，确保Chrome-PDF等待图表渲染完成后再导出

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