Question

我正在尝试从MySQL数据-> json_encode（）-> getJSON（）渲染Highcharts柱形图。 95％的时间中有6行数据要处理，因此可以轻松地手动遍历数据，并且图表可以很好地呈现。问题是结果数组中的行偶尔较少时-我当然看到TypeError：在这些情况下无法读取未定义的属性'name'。我的工作代码：

$.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个项目少于通常的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']+","];
    }
}

此alert（）的结果与手动创建的数组相同，但是图表上没有任何内容。什么需要改变？

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对象未定义

1 个答案: