来自 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++){

    let obj = {};

    headers.forEach((head, index)=>{

        obj[head.name] = res.data[i][index]

    });

    final.push(obj);

}

for (let j = 1; j < res.data.length; j++){

    headers.forEach((head, index)=>{

        if(columArr[head.name]){

            columArr[head.name].push(res.data[j][index])

        } else {

            columArr[head.name] = [res.data[j][index]]

        }

    });

}

console.dir(final,{depth:null})

console.dir(columArr,{depth:null})

const dataArray = [];

for(let key of Object.keys(columArr)){     

    dataArray.push({

        data:columArr[key].reverse(),

        type: 'line',

        name: key

    });

}

var chart = new Highcharts.Chart({

            chart: {

              type: 'spline',

              renderTo: "container"

            },

            colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],

            title: {

              text: ' values'

            },

            subtitle: {

              text: ' Data'

            },

            xAxis: {

              categories: columArr['Time'].reverse() //.reverse() to have the min year on the left 

            },

            plotOptions: {

              series: {

                marker: {

                  enabled: false

                }

              }

            },

            tooltip: {

              valueDecimals: 2,

              pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'

            },

              series:dataArray

 })

Answer 2

      var chart = new Highcharts.Chart({

                chart: {

                  type: 'spline',

                  renderTo: "container"

                },

                colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],

                title: {

                  text: ' values'

                },

                subtitle: {

                  text: ' Data'

                },

                xAxis: {

                  categories: dataArray.reverse() //.reverse() to have the min year on the left 

                },

                plotOptions: {

                  series: {

                    marker: {

                      enabled: false

                    }

                  }

                },

                tooltip: {

                  valueDecimals: 2,

                  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'

                },

                  series: [{

                      type: 'line',

                      name: 'ABC',

                      data : array_final.reverse()

                  }, {

                      name: 'XYx',

                      data: array_final1.reverse()

                  }, {

                      name: 'xyz',

                      data: array_final2.reverse()

                  }, {

                      name: 'klm',

                      data: array_final3.reverse()

                  }, {

                      name: 'ddd',

                      data: array_final4.reverse()

                  }, {

                      name: ''ABCD",

                      data: array_final5.reverse()

                  }]