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

Question

我在这种模式中有 API 响应，我想将此数据动态添加到高图表中。我还想为每一列制作一个单独的数组，然后将每个数组传递到 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()
                  }]

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

Mutiline charts Dynamically from an API request

html

javascript

multiline

highcharts