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

Question

我正在嘗試將數據掛鈎到 apexchart 圖表中

<apexchart
    type="area"
    height="350"
    :options="chartOptions"
    :series="series">
</apexchart>

我有一個數據數組，但是為了繪制圖表，我需要將它分成 3 個不同的 arrays 來繪制圖表，但我不知道如何使用 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"
    }];

結果，我需要得到這樣的 arrays

var series = [];
var timeStamp = [];

並將它們插入圖表設置

data() {
    return {
        dataOverview: [],
        series: [] // insert series objects,
        chartOptions: {
            //...
            // some options
            //...
            xaxis: {
                type: "datetime",
                categories: [  // insert timeStamp array
                    // "2020-11-01T00:00:00",
                    // "2020-11-02T00:00:00",
                    // "2020-11-03T00:00:00",
                    // "2020-11-04T00:00:00",
                    // "2020-11-05T00:00:00"
                ]  
            },
            //...
            // some options
            //...
        }
    }
}

beforeMount() {   
   this.onGetDataOverview();
},
methods: {
onGetDataOverview() {
  this.$axios
    .$get(
      this.$store.getters["store/getApiPath"] + "/Analyst/GetOverviewData"
    )
    .then(response => {
      this.dataOverview = response;
      const seriesOne = this.dataOverview.map(
        ({ successfullySyngranized }) => successfullySyngranized
      );
      const seriesTwo = this.dataOverview.map(
        ({ unsuccessfullySynchronized }) => unsuccessfullySynchronized
      );

      const series2 = [
        { name: "series1", data: seriesOne },
        { name: "series2", data: seriesTwo }
      ];
      this.series = series2;
          
      //Here I am trying to insert time data, however the graph does not start
      
        let xaxis = {
        ...this.chartOptions.xaxis,
        categories: this.dataOverview.map(({ timeStamp }) => timeStamp)
      };
      this.chartOptions = { ...this.chartOptions, ...{ xaxis: xaxis } };
    })

插入時間數據時 - 圖表未構建，但是如果我在變量聲明中明確指出時間 - 圖表已構建

圖片

但我還需要進行跟蹤，以便在收到新數據時圖形移動，即使用計算

Answer 1

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

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

Answer 2

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

Answer 3

var series = [
   {
      name: "series1",
      data: dataOverview.map(({series1}) => series1)
   },
   {
      name: "series2",
      data: dataOverview.map(({series2}) => series2)
   }
]

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

Answer 4

通過數組迭代一次並收集數據。 在）

 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" } ]; const collect = (data) =>{ const series1 = [] const series2 = [] const timestamp = [] data.forEach(item => { series1.push(item.series1) series2.push(item.series2) timestamp.push(item.timestamp) }) return {series1, series2, timestamp} } console.log(collect(dataOverview));

Answer 5

使用 map：

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

Answer 6

假設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 } }