Highcharts Remote Data - объект JSON не определен - PullRequest
Новая
       8

Highcharts Remote Data - объект JSON не определен

0 голосов
/ 05 февраля 2019

Я пытаюсь визуализировать диаграмму столбцов Highcharts из данных MySQL -> json_encode () -> getJSON ().В 95% случаев приходится обрабатывать 6 строк данных, поэтому их можно легко перебрать вручную, и диаграмма отрисовывается нормально.Проблема в том, что в массиве результатов иногда меньше строк - я, конечно, вижу TypeError: в этих случаях не удается прочитать свойство 'name' из 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']+","];
    }
}

Это оповещение () выдает те же результаты, что и созданный вручную массив, но на графике ничего не отображается.Что нужно изменить?

1 Ответ

0 голосов
/ 05 февраля 2019

Попробуйте сопоставить ваши данные.Вы можете легко все настроить, используя функцию 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);
}
...