来自AJAX json请求的数据没有加载到HighChart中。

Question

我试图从一个JSON文件中获取数据，并从该JSON文件中的数据生成一个HighChart。该文件被正确加载，因为我能够在控制台日志中看到json数据，但它无法加载到HighChart中。请帮助我。请看下面的JavaScript代码和JSON文件。

var map = L.map('map', {
minZoom: 2
}).setView([0, 0], 0);

tile = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var tooltip = L.tooltip().setContent('<div class="popupcontainer"><p><b>test</b></p><div id="linechart">Loading chart...</div></div>');

var dataPoints = [{lat: 22, lng: -0.09, time: 0, FOC:15}, 
{lat: 51.49, lng: -0.09, time: 4, FOC:15}, 
{lat: 10.49, lng: -0.22, time: 8, FOC:20}, 
{lat: 40.49, lng: -0.09, time: 16, FOC:100},
{lat: 30.49, lng: 0.22, time: 18, FOC:125}];

dataPoints.forEach(function(coord = lat, lng) {
  L.circle(coord,1000, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 1
        }).addTo(map).bindTooltip(tooltip);
});

map.on('tooltipopen', function(e) {
  $.ajax({
      type: "GET",
      url: "data.json", 
      dataType: 'json'
    })
    .done(function(data) {
    console.log(data);
      $('#linechart').highcharts({
        chart: {
            zoomType: 'xy'
        },

        title: {
            text:''
        },

        subtitle: {
        },

        tooltip: {
            valueDecimals: 2
        },

        xAxis: {
            type: 'datetime',
                 title: {
            enabled: true,
            text: 'Time'
          },
          crosshair: true,
          startOnTick: true,
          endOnTick: true,
          showLastLabel: true
        },

           yAxis: {
          title: {
            enabled: true,
            text: 'Fuel Oil Consumption T/Day'
          }
        },
        series: [{
            data: data,
            lineWidth: 1,
            name: 'Singelgracht',
            showInLegend: false,
            marker: {
                enabled: false
            },
        }],
        credits: {enabled: false},

        exporting: {
            enabled: false
        }
      });
    });
});

map.on('tooltipclose', function(e){
  $('#linechart').html("Loading...");
});

请看下面的data.json文件。

[{"time": "2019-01-23T18:25:43.511Z", "FOC":15}, 
{"time": "2019-01-24T18:25:43.511Z", "FOC":15}, 
{"time": "2019-01-25T18:25:43.511Z", "FOC":20}, 
{"time": "2019-01-26T18:25:43.511Z", "FOC":100},
{"time": "2019-01-27T18:25:43.511Z", "FOC":125}]

请看下面的控制台日志输出。控制台日志图片

Answer 1

已经通过添加for循环解决了这个问题，并将数据推送到一个新的数组中，布局如下[[x,y],[x,y]......]。

// Process JSON for Highchart
    var processed_json = new Array();
    for (i = 0; i < data.length; i++) {
        processed_json.push([data[i].time, parseInt(data[i].FOC)]);
    }