亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

來自 API 請求的動態多線圖表

來自 API 請求的動態多線圖表

幕布斯6054654 2023-03-18 17:56:45
我在這種模式下有 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], ], }如何將每個索引值傳遞到數組中?感謝您的幫助。
查看完整描述

2 回答

?
慕斯王

TA貢獻1864條經驗 獲得超2個贊

第一個 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

 })



查看完整回答
反對 回復 2023-03-18
?
守著星空守著你

TA貢獻1799條經驗 獲得超8個贊

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

                  }]


查看完整回答
反對 回復 2023-03-18
  • 2 回答
  • 0 關注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號