时间戳

首页 > 解决方案 > Highcharts 远程数据 - JSON 对象未定义

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

问题描述

我正在尝试从 MySQL 数据 -> json_encode() -> getJSON() 呈现 Highcharts 柱形图。95% 的时间有 6 行数据要处理，因此可以轻松地手动循环，并且图表呈现良好。问题是当结果数组中的行偶尔较少时 - 我当然会看到 TypeError: Cannot read property '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() 输出与手动创建的数组相同的结果，但图表上没有呈现任何内容。需要改变什么？

标签： javascriptarrayshighchartsgetjsonundefined-behavior

解决方案

尝试映射您的数据。map您可以使用该功能轻松设置所有内容。它也更清洁和简单。map 您可以在此处找到参考。

$.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);
}

推荐阅读