Laravel环境下Highcharts每秒实时更新图表失效问题排查

后端问题 #

• VRM API请求地址无效：你使用的路径https://vrmapi.victronenergy.com/v2/installations//overallstats缺少安装实例ID，双斜杠属于非法路径，需要补全你在Victron VRM后台获取的安装ID，格式为https://vrmapi.victronenergy.com/v2/installations/{你的安装ID}/overallstats
• 认证信息缺失：请求头X-Authorization: Bearer 后未填写你申请的VRM API令牌，没有合法令牌无法拉取接口数据
• 逻辑耦合错误：你将VRM数据拉取、存储、统计逻辑全部写在返回视图的index方法中，仅在用户首次打开页面时执行一次，后续不会自动更新数据库数据
• 统计规则不匹配：你要实现秒级更新的实时图表，但统计逻辑是按小时分组的年度平均耗电量，统计粒度完全不符合需求，且pluck('COUNT')返回的是数组而非单个数值，传给前端会导致取值异常
• 缺少必要机制：你需要新增两个逻辑：
  1. 用Laravel定时任务（Task Scheduling）定期调用VRM API拉取最新数据存入数据库，不要和视图返回逻辑绑定
  2. 新增独立的API接口给前端返回最新耗电量数据，示例代码如下：

// 新增路由
Route::get('/api/latest-consumption', [VectronApi::class, 'getLatestConsumption']);

// 控制器新增方法
public function getLatestConsumption()
{
    $latestData = Devices::latest()->first();
    return response()->json($latestData->total_consumption ?? 0);
}

前端问题 #

• 数据结构错误：你直接把后端返回的数组FetchData当做Y轴数值传入Highcharts，Y轴需要接收单个数值而非数组
• 无实时拉取逻辑：你写的setInterval仅每秒重复使用页面首次加载时拿到的静态数据，没有请求后端拉取最新值，所以不会更新
• 资源重复引入：你先后两次引入Highcharts库，会导致脚本冲突
• 初始数据逻辑错误：你将数组类型的FetchData直接赋值给初始数据，又往数组中push嵌套数组的Y值，完全不符合Highcharts要求的数据结构

修复后的核心JS代码 #

$(document).ready(function() {
    Highcharts.setOptions({
        global: { useUTC: false }
    });

    $('#container').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg,
            marginRight: 10,
            events: {
                load: function () {
                    const series = this.series[0];
                    // 每秒请求后端拉取最新数据
                    setInterval(function () {
                        $.get('/api/latest-consumption', function(y) {
                            const x = (new Date()).getTime();
                            series.addPoint([x, parseFloat(y)], true, true);
                        });
                    }, 1000);
                }
            }
        },
        title: { text: '实时耗电量数据' },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: { text: '耗电量(kWh)' },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: { enabled: false },
        exporting: { enabled: false },
        series: [{
            name: 'Consumption',
            data: (function () {
                // 生成初始20个占位数据点
                const data = [];
                const time = (new Date()).getTime();
                for (let i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: 0
                    });
                }
                return data;
            }())
        }]
    });
});

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