第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

將數(shù)據(jù)數(shù)組拆分為單獨(dú)的數(shù)組

將數(shù)據(jù)數(shù)組拆分為單獨(dú)的數(shù)組

12345678_0001 2023-07-29 16:05:15
我正在嘗試將數(shù)據(jù)掛接到 apexchart 圖表中<apexchart? ? type="area"? ? height="350"? ? :options="chartOptions"? ? :series="series"></apexchart>我有一個(gè)數(shù)據(jù)數(shù)組，但是為了繪制圖表，我需要將其分成3個(gè)不同的數(shù)組來繪制圖表，但我不知道如何使用JS來做到這一點(diǎn)我從 api 得到一個(gè)這樣的數(shù)組dataOverview = [? ? {? ? ? ? "id": 1,? ? ? ? "successfullySyngranized": 1,? ? ? ? "unsuccessfullySynchronized": 5,? ? ? ? "timeStamp": "2020-11-01T00:00:00"? ? },? ? {? ? ? ? "id": 2,? ? ? ? "successfullySyngranized": 2,? ? ? ? "unsuccessfullySynchronized": 4,? ? ? ? "timeStamp": "2020-11-02T00:00:00"? ? },? ? {? ? ? ? "id": 3,? ? ? ? "successfullySyngranized": 3,? ? ? ? "unsuccessfullySynchronized": 3,? ? ? ? "timeStamp": "2020-11-03T00:00:00"? ? },? ? {? ? ? ? "id": 4,? ? ? ? "successfullySyngranized": 4,? ? ? ? "unsuccessfullySynchronized": 2,? ? ? ? "timeStamp": "2020-11-04T00:00:00"? ? },? ? {? ? ? ? "id": 5,? ? ? ? "successfullySyngranized": 5,? ? ? ? "unsuccessfullySynchronized": 1,? ? ? ? "timeStamp": "2020-11-05T00:00:00"? ? }];結(jié)果，我需要得到這樣的數(shù)組var series = [];var timeStamp = [];插入時(shí)間數(shù)據(jù)時(shí) - 未構(gòu)建圖表，但是如果我在變量聲明中明確指示時(shí)間 - 則會(huì)構(gòu)建圖表但我還需要進(jìn)行跟蹤，以便在收到新數(shù)據(jù)時(shí)圖形會(huì)移動(dòng)，即使用計(jì)算的
查看完整描述

5 回答

?
哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

這非常簡單，您只需使用.map


var series1 = dataOverview.map(x => x.series1);

var series2 = dataOverview.map(x => x.series2);

var categories  = dataOverview.map(x => x.timestamp);


查看完整回答
反對 回復(fù) 2023-07-29
?
牛魔王的故事

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊

假設(shè)將其dataOverview定義為數(shù)據(jù)屬性，例如：


data(){

  return {

     dataOverview:[...]

   }

}


和應(yīng)該定義為計(jì)算屬性，如下所示series：chartOptions


computed:{

   series(){

     let _series=[

           {

             name:'series1',

             data: this.dataOverview.map(item=>item.series1)

           },

           {

            name:'series2',

             data: this.dataOverview.map(item=>item.series2)

           }

         ]

     return _series;

   },

  chartOptions(){

       return {

            //...

            // some options

            //...

            xaxis: {

                type: "datetime",

                categories: this.dataOverview.map(item=>item.timestamp)

            },

            //...

            // some options

            //...

        }

   }


}

編輯


您在以下方面遇到反應(yīng)性問題：


   this.chartOptions.xaxis.categories = this.dataOverview.map(

        ({ timeStamp }) => timeStamp

     );

它應(yīng)該是 ：



let xaxis = { ...this.chartOptions.xaxis, categories: this.dataOverview.map(

        ({ timeStamp }) => timeStamp

     ) }

this.chartOptions = { ...this.chartOptions, ...{ xaxis: xaxis } }


查看完整回答
反對 回復(fù) 2023-07-29
?
慕桂英546537

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超10個(gè)贊

var series = [

   {

      name: "series1",

      data: dataOverview.map(({series1}) => series1)

   },

   {

      name: "series2",

      data: dataOverview.map(({series2}) => series2)

   }

]


var timeStamp = dataOverview.map(({timestamp}) => timestamp);


查看完整回答
反對 回復(fù) 2023-07-29
?
慕無忌1623718

TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊

使用數(shù)組的map方法。

const dataOverview = [{

? ? id: 1,

? ? series1: 31,

? ? series2: 11,

? ? timestamp: "2018-09-19T00:00:00.000Z"

? },

? {

? ? id: 2,

? ? series1: 40,

? ? series2: 32,

? ? timestamp: "2018-09-19T03:30:00.000Z"

? },

? {

? ? id: 3,

? ? series1: 28,

? ? series2: 45,

? ? timestamp: "2018-09-19T06:30:00.000Z"

? },

? {

? ? id: 4,

? ? series1: 51,

? ? series2: 32,

? ? timestamp: "2018-09-19T09:30:00.000Z"

? },

? {

? ? id: 5,

? ? series1: 42,

? ? series2: 34,

? ? timestamp: "2018-09-19T11:30:00.000Z"

? }

];


var series1 = dataOverview.map(({ series1 }) => series1);

var series2 = dataOverview.map(({ series2 }) => series2);

var timeStamp = dataOverview.map(({ timestamp }) => timestamp);


console.log(series1, series2, timeStamp);


查看完整回答
反對 回復(fù) 2023-07-29
?
神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

使用地圖：


const seriesOne = dataOverview.map(el => el.series1);

const seriesTwo = dataOverview.map(el => el.series2);


const series = [

  { name: 'series1', data: seriesOne},

  {name: 'series2', data: seriesTwo}

]


console.log(series);


查看完整回答
反對 回復(fù) 2023-07-29
  • 5 回答
  • 0 關(guān)注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)