首頁猿問將數據數組拆分為單獨的數組

將數據數組拆分為單獨的數組

JavaScript

12345678_0001 2023-07-29 16:05:15

我正在嘗試將數據掛接到 apexchart 圖表中<apexchart? ? type="area"? ? height="350"? ? :options="chartOptions"? ? :series="series"></apexchart>我有一個數據數組，但是為了繪制圖表，我需要將其分成3個不同的數組來繪制圖表，但我不知道如何使用JS來做到這一點我從 api 得到一個這樣的數組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"? ? }];結果，我需要得到這樣的數組var series = [];var timeStamp = [];插入時間數據時 - 未構建圖表，但是如果我在變量聲明中明確指示時間 - 則會構建圖表但我還需要進行跟蹤，以便在收到新數據時圖形會移動，即使用計算的

查看完整描述

5 回答

哆啦的時光機

TA貢獻1779條經驗獲得超6個贊

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

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

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

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

反對回復 2023-07-29

牛魔王的故事

TA貢獻1830條經驗獲得超3個贊

假設將其dataOverview定義為數據屬性，例如：

data(){

return {

dataOverview:[...]

}

和應該定義為計算屬性，如下所示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

//...

}

編輯

您在以下方面遇到反應性問題：

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

({ timeStamp }) => timeStamp

);

它應該是：

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

({ timeStamp }) => timeStamp

) }

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

反對回復 2023-07-29

慕桂英546537

TA貢獻1848條經驗獲得超10個贊

var series = [

{

name: "series1",

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

{

name: "series2",

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

}

]

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

反對回復 2023-07-29

慕無忌1623718

TA貢獻1744條經驗獲得超4個贊

使用數組的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);

反對回復 2023-07-29

神不在的星期二

TA貢獻1963條經驗獲得超6個贊

使用地圖：

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

反對回復 2023-07-29

5 回答
0 關注
210 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

將數據數組拆分為單獨的數組

將數據數組拆分為單獨的數組

5 回答

添加回答