使用来自Ajax调用的数据回填Highcharts图表

Question

我正在尝试创建一个实时更新的Highcharts图表以监视参数，我还想用来自MySQL服务器的数据回填该图表。

当前，我有一个在chart.events.load调用的函数，该函数（希望最终）将一系列包含SQL数据的图表添加到图表中：

function _initSeries(chart) {
    chart.addSeries({
        name: 'series1',
        data: (function() {
            // backfill data from MySQL
            let sqlData = [];

            _getMySqlData(function(result) {
                for (let i = 0; i < result.length; i += 1) {
                    sqlData.push({
                        x: result[i].milliseconds,
                        y: result[i].value
                    });
                }

                // preferrably I would return sqlData here but obviously that won't work
            });
            // return must be on this level
        }())
    });
}

从MySQL数据库检索数据的功能可以正常工作，并返回我要推送到sqlData并返回的值的数组。 显然，我无法返回，因为我在回调中，但是我不确定如何从回调中设置data的值。

Answer 1

我通过重组代码来解决这个问题。 我没有立即调用chart.addSeries() ，而是调用了getMySqlData() 。 在该回调中，我能够在getMySqlData()中使用chart.addSeries() 。

function _initSeries(key, chart) {
    _getMySqlData(key, function(result) {
        let sqlData = [];
        for (let i = 0; i < result.length; i += 1) {
            sqlData.push({
                x: result[i].milliseconds,
                y: result[i].value
            });
        }
        chart.addSeries({
            name: key,
            data: sqlData
        });
    });
}