AmCharts4加载数据出现net::ERR_NETWORK_IO_SUSPENDED错误求助

我使用AmCharts4通过URL从PHP文件加载JSON数据渲染饼图，偶尔会出现加载失败的情况。JavaScript控制台报错net::ERR_NETWORK_IO_SUSPENDED，图表提示Unable to load file，必须刷新页面才能重新加载图表。

相关代码：

const chartTotales = am4core.create('chart-disponibilidad-pastel', am4charts.PieChart);

chartTotales.dataSource.url = 'backend/production.php?opc=4';
chartTotales.dataSource.reloadFrequency = 6000;

const pieSeries = chartTotales.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = 'horas';
pieSeries.dataFields.category = 'tipo';
pieSeries.dataFields.test = '0 min';
pieSeries.slices.template.stroke = am4core.color('#fff');
pieSeries.slices.template.strokeOpacity = 1;

pieSeries.labels.template.text = '{category} {test} {value.formatDuration(\'hh:mm:ss\')} Hrs';
pieSeries.slices.template.tooltipText = '{category} {value.formatDuration(\'hh:mm:ss\')}';

const colorSetTotal = new am4core.ColorSet();
//D72906
colorSetTotal.list = ['#F6F623', '#498561', '#D72906'].map( function(color) {
  // @ts-ignore
  return new am4core.color(color);
});

错误截图：

可能原因与解决办法 #

1. 给数据源添加错误重试机制 #

AmCharts4的dataSource支持错误事件监听，请求失败时自动重试，不用手动刷新：

// 初始化图表后添加错误监听
chartTotales.dataSource.events.on("error", function(ev) {
    console.log("数据加载失败，正在重试...", ev.error);
    // 延迟1秒后重试，可根据需求调整时间
    setTimeout(function() {
        ev.target.load();
    }, 1000);
});

2. 调整请求频率，避免请求冲突 #

当前设置6秒自动刷新，如果服务器响应慢，前一次请求未完成就发起新请求，容易引发网络异常。可以做两种调整：

• 延长刷新间隔，比如改为10秒：chartTotales.dataSource.reloadFrequency = 10000;
• 改为请求完成后再触发下一次刷新，避免重叠：

// 注释掉原来的自动刷新配置
// chartTotales.dataSource.reloadFrequency = 6000;

chartTotales.dataSource.events.on("done", function() {
    // 请求完成后延迟6秒再加载下一次
    setTimeout(function() {
        chartTotales.dataSource.load();
    }, 6000);
});
// 首次加载数据
chartTotales.dataSource.load();

3. 排查PHP脚本稳定性 #

• 确保backend/production.php?opc=4返回标准JSON格式，没有语法错误（可以直接在浏览器访问该URL验证）
• 在PHP脚本中添加日志，记录每次请求的参数、执行时间和返回状态，排查是否存在偶尔超时或报错的情况
• 给PHP脚本设置合理的执行超时时间，比如set_time_limit(30);

4. 监听客户端网络状态 #

net::ERR_NETWORK_IO_SUSPENDED常和客户端网络临时中断有关，添加网络状态监听，恢复时自动重加载：

window.addEventListener('online', function() {
    console.log("网络恢复，重新加载图表数据");
    chartTotales.dataSource.load();
});

5. 调试请求细节 #

打开浏览器开发者工具的Network面板，查看失败请求的详细信息：

• 检查请求状态码、响应内容，确认是否是服务器端返回错误
• 查看是否有CORS跨域问题（如果前后端域名不同）
• 确认请求是否真的发送到服务器，还是在客户端被中断

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