来自 API 请求的动态多线图表

Question

我在这种模式下有 API 响应，我想将这些数据动态添加到 highcharts 中。我还想为每一列制作一个单独的数组，然后将每个数组传递到 Highcharts。谁能帮我解决这个问题。当我尝试遍历 API 结果时，结果将是未定义的。

示例 API 响应：

{

 "data": [

  [

  {

    "name": "Time",

    "unit":"Y-m-d"

  },

  {

    "location": "XYZ",

    "name": "ABC",

    "unit": "kmh",

   },

  {

    "location": "A1",

    "name": "xcds",

    "unit": "kmh",

  },

  {

    "location": "A2",

    "name": "efg",

    "unit": "avg",

  },

  {

    "location": "A3",

    "name": "fgf",

    "unit": "avg",

  },

  {

    "location": "A1",

    "name": "klm",

    "unit": "kmh",

  },

  {

    "location": "A5",

    "name": "ABCDE",

    "unit": "kmh",

  }

],

[

  "2020-08-05T10:00:00",

 43.8

 67

 65.2

 56

 6765

],

[

  "2020-08-05T10:05:00",

  2.69924,

  65.8,

  7.

  136,

  11.5,

 19

],

[

  "2020-08-05T10:10:00",

  18.3

  93.6,

  21,

  23,

  26,

  15,

],

[

  "2020-08-05T10:15:00",

  39,

  26,

  24

  89,

  70.48,

  1.10

], 

], }

如何将每个索引值传递到数组中？感谢您的帮助。

Answer 1

第一个 for 循环创建一个对象数组，名称作为键和值，下一个 for 循环创建一个对象，名称作为键和值数组const headers = res.data[0];const final = [];const columArr = {};for (let i = 1; i < res.data.length; i++){&nbsp; &nbsp; let obj = {};&nbsp; &nbsp; headers.forEach((head, index)=>{&nbsp; &nbsp; &nbsp; &nbsp; obj[head.name] = res.data[i][index]&nbsp; &nbsp; });&nbsp; &nbsp; final.push(obj);}for (let j = 1; j < res.data.length; j++){&nbsp; &nbsp; headers.forEach((head, index)=>{&nbsp; &nbsp; &nbsp; &nbsp; if(columArr[head.name]){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columArr[head.name].push(res.data[j][index])&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columArr[head.name] = [res.data[j][index]]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}console.dir(final,{depth:null})console.dir(columArr,{depth:null})const dataArray = [];for(let key of Object.keys(columArr)){&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; dataArray.push({&nbsp; &nbsp; &nbsp; &nbsp; data:columArr[key].reverse(),&nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; name: key&nbsp; &nbsp; });}var chart = new Highcharts.Chart({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'spline',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderTo: "container"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: ' values'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; subtitle: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: ' Data'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; categories: columArr['Time'].reverse() //.reverse() to have the min year on the left&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plotOptions: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; series: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltip: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; valueDecimals: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; series:dataArray&nbsp;})

Answer 2

&nbsp; &nbsp; &nbsp; var chart = new Highcharts.Chart({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'spline',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderTo: "container"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: ' values'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; subtitle: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: ' Data'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; categories: dataArray.reverse() //.reverse() to have the min year on the left&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plotOptions: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; series: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltip: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; valueDecimals: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; series: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'ABC',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data : array_final.reverse()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'XYx',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: array_final1.reverse()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'xyz',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: array_final2.reverse()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'klm',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: array_final3.reverse()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'ddd',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: array_final4.reverse()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: ''ABCD",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: array_final5.reverse()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]