来自 AJAX json 请求的数据未在 HighChart 中加载答案

【问题标题】：data from AJAX json request not loading in HighChart来自 AJAX json 请求的数据未在 HighChart 中加载
【发布时间】：2020-05-24 13:29:27
【问题描述】：

我正在尝试从 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}]

请查看下面的控制台日志输出： console log picture

【问题讨论】：

将控制台中的数据作为对象还是字符串？
@FalkeDesign 感谢您抽出宝贵时间。我已经用控制台日志输出的图片更新了这个问题。此外，我已将时间属性更改为时间戳输出，但没有进展:(
我从未使用过 highchart，但可能是您的系列数据格式错误：seriesdata: [[5, 2], [6, 3], [8, 2]] [x,y] 值
@FalkeDesign 是的，谢谢。通过创建一个 for 循环来得到这个 [[x,y], [x,y]...] 作为最终结果来解决它！

标签： javascript json ajax highcharts leaflet

【解决方案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)]);
    }

【讨论】：