Highcharts 远程数据 - JSON 对象未定义

Question

我正在尝试根据 MySQL 数据 -> json_encode() -> getJSON() 呈现 Highcharts 柱形图。 95% 的时间有 6 行数据要处理，所以这可以很容易地手动循环并且图表呈现良好。问题是结果数组中的行偶尔会减少——我当然会看到 TypeError: Cannot read 属性 'name' of undefined 在这些情况下。我的工作代码：

$.getJSON(url, function(json)) {
    if(typeof json === 'object' && json.length > 0) {
        var nameData = [json[0]['name'],json[1]['name'],json[2]['name'],json[3]['name'],json[4]['name'],json[5]['name']];

        var matchedData = [json[0]['data']['Matched'],json[1]['data']['Matched'],json[2]['data']['Matched'],json[3]['data']['Matched'],json[4]['data']['Matched'],json[5]['data']['Matched']];

        var bookedData = [json[0]['data']['Booked'],json[1]['data']['Booked'],json[2]['data']['Booked'],json[3]['data']['Booked'],json[4]['data']['Booked'],json[5]['data']['Booked']];
    }
    var options = {
        chart: {
            renderTo: 'div',
            type: 'column'
        },
        title: {
            text: 'Chart Title',
            x: -20
        },
        xAxis: {
            type: 'category',
            categories: nameData,
            crosshair: true
        },
        series: [{
            name: 'Matched',
            data: matchedData
        }, {
            name: 'Booked',
            data: bookedData
        }]
    }
    chart = new Highcharts.Chart(options);
}

这样可以正确呈现图表。然而，当数组中的项少于通常的 6 个时，TypeError 就会停止。我试图在发送到 Highcharts 之前计算数组项：

var nameData = [];
var matchedData = [];
var bookedData = [];
if (typeof json === 'object' && json.length > 0) {
    for (var a = 0; a < json.length; a++) {
        nameData += [json[a]['name']+","];
        matchedData += [json[a]['data']['Matched']+","];
        bookedData += [json[a]['data']['Booked']+","];
    }
}

此 alerts() 输出与手动创建的数组相同的结果，但图表上没有呈现任何内容。需要改变什么？

Answer 1

尝试映射您的数据。您可以使用 map 函数轻松设置所有内容。它也更干净、更简单。您可以找到 map here.

的参考

$.getJSON(url, function(json)) {
    if(typeof json === 'object' && json.length > 0) {
        var nameData = json.map(obj => obj['name']);

        var matchedData = json.map(obj => obj['data']['Matched']);

        var bookedData = json.map(obj => obj['data']['Booked']);
    }
    var options = {
        chart: {
            renderTo: 'div',
            type: 'column'
        },
        title: {
            text: 'Chart Title',
            x: -20
        },
        xAxis: {
            type: 'category',
            categories: nameData,
            crosshair: true
        },
        series: [{
            name: 'Matched',
            data: matchedData
        }, {
            name: 'Booked',
            data: bookedData
        }]
    }
    chart = new Highcharts.Chart(options);
}

Highcharts 远程数据 - JSON 对象未定义

Highcharts Remote Data - JSON Object Undefined

javascript

arrays

getjson

undefined-behavior

highcharts