Highcharts 未使用 javascript 函数显示系列数据

Question

我有一个用于 highcharts 的 .js 代码：

$(function loadTransactionsLevel() {
    //Auto call function, for 1 minute
    setInterval(loadTransactionsLevel, 60000);

    var nowDate = new Date();
    var nowYear = nowDate.getFullYear();
    var nowMonth = (nowDate.getMonth()+1);
    var nowDay = nowDate.getDate();
    var nowHour = nowDate.getHours();
    var nowMinus10Minutes = (nowDate.getMinutes() - 10);
    var nowMinutes = (nowDate.getMinutes() - 1 );

    Highcharts.setOptions({
        lang: {
            loading: 'Cargando...',
            months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
            shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            exportButtonTitle: "Exportar",
            printButtonTitle: "Importar",
            rangeSelectorFrom: "Desde",
            rangeSelectorTo: "Hasta",
            rangeSelectorZoom: "Período",
            downloadPNG: 'Descargar imagen PNG',
            downloadJPEG: 'Descargar imagen JPEG',
            downloadPDF: 'Descargar imagen PDF',
            downloadSVG: 'Descargar imagen SVG',
            printChart: 'Imprimir',
            resetZoom: 'Reiniciar zoom',
            resetZoomTitle: 'Reiniciar zoom',
            thousandsSep: ",",
            decimalPoint: '.'
        }
    });


    $('#liveTransactionsLevel').highcharts({
        chart: {
            type: 'column',
            backgroundColor: '#333333'
        },
        title: {
            text: 'Traffic Level3',
            style: {
                color: '#dedede'
            }
        },
        subtitle: {
            text: 'Messages passed',
            style: {
                color: '#dedede'
            }
        },

        credits: {
            enabled: false
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%A %d de %B de %Y', (new Date(nowYear + '-' + nowMonth + '-' + nowDay)), false) + ': ' +
                    '<b>' + Highcharts.numberFormat(this.y, 0) + '</b>';
            }
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[2]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            },

            series: {
                animation: false
            }
        },

        xAxis: {
            title: {
                text: Highcharts.dateFormat('%A %d de %B de %Y', (new Date(nowYear + '-' + nowMonth + '-' + nowDay)), false),
                style: {
                    color: '#AAAAAA'
                }
            },

            labels: {
                style: {
                    color: '#dedede'
                }
            },

            type: 'datetime',
            min: Date.parse(nowYear + "-" + nowMonth + "-" + nowDay + " " + nowHour + ":" + nowMinus10Minutes + " UTC"),//Date.UTC(nowYear, nowMonth, nowDay, nowHour, nowMinus10Minutes),
            max: Date.parse(nowYear + "-" + nowMonth + "-" + nowDay + " " + nowHour + ":" + nowMinutes + " UTC"),//Date.UTC(nowYear, nowMonth, nowDay, nowHour, nowMinutes),
            showEmpty: true,
            tickInterval: 1000 * 60, // one minute
            tickPixelInterval: 10
        },


    yAxis: {
            title: {
                text: 'Success',
                style: {
                    color: '#dedede'
                }
            },

            labels: {
                style: {
                    color: '#dedede'
                }
            },

            allowDecimals: false,
            min: 0,
            max: null,
            showEmpty: true
        },

        series: [{
            type: 'column',
            color: '#5DC05D',
            lineWidth: 2,
            name: 'Messages passed',
            data: getData()
        }]
    });
});


function getData() {

    var array_keys = [];
    var array_values = [];
    var data = [];

    $.ajax({
        type: "GET",
        url: "http://localhost:8080/flkLive/ws/root/success",
        data: "",
        success: function(values){

            for (var key in values) {
                if (values.hasOwnProperty(key)) {

                    array_keys.push(key);
                    array_values.push(values[key]);
                }
            }

            array_keys.sort();
            array_values.sort();

            for (var i = 0; i < array_keys.length; i++){

                data[i] = [
                    [ Date.parse(array_keys[i] + " UTC"), array_values[i] ]
                ]
            }

            alert(data);
            return data;
        }
    });
}

但是当我运行项目时，highcharts 没有显示任何数据，这是怎么回事？

下面是一张图片，其中的值以格式（time_in_milliseconds，int_value）显示：

Answer 1

问题在于，当您的图表调用 getData 时，数据为空，这就是返回给图表的内容......实际上甚至不是，因为您的图表中没有 return 语句函数所以我的猜测是它会返回未定义的。

获取数据的 ajax 调用虽然是异步发送的，但是在成功函数上，即使您返回数据，该数据也将无处可去。

您需要做的是要么在ajax回调中创建图表，要么使用这样的声明将数据放入图表并刷新它：

chart.series[0].setData(data,true);

在这种情况下，图表必须是您的图表存储在这样的变量中：

var chart = $('#liveTransactionsLevel').highcharts({
... })

您还需要在 getData 函数中添加一个返回语句，以避免图表初始化因“未定义”而崩溃。 为此，您需要在结束 getData() 函数之前将其移动：

return data;

这样，您将拥有一个空图表，当 ajax 调用完成获取数据时，该图表将被填充。