javascript - 将一组数据拆分为单独的数组

Question

我正在尝试将数据挂钩到顶点图表

<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 = [];

并将它们插入图表设置

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

插入时间数据时 - 未构建图表，但是如果我在变量声明中明确指出时间 - 构建图表

图片

但我还需要进行跟踪，以便在收到新数据时图形移动，即使用计算

标签： javascriptvue.js

Answer 1

这很简单，您只需使用.map

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