来自 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)]);
}