Morris.js: Невозможно прочитать свойство 'x' неопределенного

Question

Я пытаюсь использовать Morris.js, загруженный файлом JSON, для построения диаграммы области.

Мой JSON выглядит следующим образом:

[{"period": 0, "time": 121.0}, {"period": 1, "time": 102.0}, {"period": 2, "time": 104.0}, {"period": 3, "time": 91.0}, {"period": 4, "time": 99.0}, {"period": 5, "time": 94.0}, {"period": 6, "time": 95.0}, {"period": 7, "time": 95.0}, {"period": 8, "time": 91.0}, {"period": 9, "time": 108.0}] 

Я создал .js файл со следующим содержанием:

$(function() { 

var jsonData = $.getJSON("data.json", function (json) { 
    console.log(json); 

    Morris.Area({ 
     element: 'morris-area-chart', 
     data: jsonData, 
     xkey: 'period', 
     ykeys: ['time'], 
     labels: ['Time'], 
     pointSize: 2, 
     hideHover: 'auto', 
     resize: true 
    }); 
}); 
}); 

Я сталкиваюсь следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'x' of undefined 

Когда я заменяю строку «data: jsonData» введенными вручную значениями, я не получил ошибку и успешно pl данных.

$ (функция() {

Morris.Area({ 
    element: 'morris-area-chart', 
    data: [{ 
     period: '1', 
     time: 10, 
    }, { 
     period: '2', 
     time: 8, 
    }, { 
     period: '3', 
     time: 11, 
    }, { 
     period: '4', 
     time: 12, 
    }, { 
     period: '5', 
     time: 16, 
    }, { 
     period: '6', 
     time: 13, 
    }, { 
     period: '7', 
     time: 7, 
    }, { 
     period: '8', 
     time: 10, 
    }, { 
     period: '9', 
     time: 13, 
    }, { 
     period: '10', 
     time: 10, 
    }], 
    xkey: 'period', 
    ykeys: ['time'], 
    labels: ['Task Time'], 
    pointSize: 2, 
    hideHover: 'auto', 
    resize: true 
}); 

Answer 1

По заостренному предложению:.

$(function() { 

    var jsonData = $.getJSON("data.json", function (jsonData) { 
    console.log(jsonData); 

    Morris.Area({ 
     element: 'morris-area-chart', 
     data: jsonData, 
     xkey: 'period', 
     ykeys: ['time'], 
     labels: ['Time'], 
     pointSize: 2, 
     hideHover: 'auto', 
     resize: true 
    }); 
    }); 
});