Morris.js：无法读取未定义的属性“ x”

Question

I'm trying to use Morris.js feeded by a JSON file to plot an area chart.

My JSON is as following:

[{"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}]

I created a .js file with the following content:

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

I'm encountering the following error:

Uncaught TypeError: Cannot read property 'x' of undefined

When I replace the "data: jsonData" line with manually introduced values I received no error and successfully plot the data.

$(function() {

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

As per Pointy suggestion:

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