Mutiline图表通过API请求动态生成 [英] Mutiline charts Dynamically from an API request

问题描述

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

I have API response in this pattern and i want to add this data dynamically into the highcharts. I also want to make a seperate array for each column and then pass each each array into Highcharts. Can anyone help me to solve this problem. When i tried to iterate through into the API result, Result would be undefined.

示例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
], 

]，}

如何将每个索引值传递给数组?谢谢您的帮助.

How to pass each index value into array? Thank you for your help.

推荐答案

第一个for循环创建名称为键和值的对象数组，下一个for循环创建名称为键和值的数组对象

the first for loop creates array of objects with the name as key and value, next for loop creates an object with name as key and array of values

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
 })

这篇关于Mutiline图表通过API请求动态生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！