在vueapexcharts中加載axios資料

作為標題，我正在嘗試使用 vue2 在 Vue apexcharts（折線圖）中加載 Axios 資料。我已經閱讀了 apexcharts 的檔案，但仍然無法弄清楚如何將資料傳遞到圖表中。我想將日期作為 x 軸，其他作為折線圖中的值。

另外，我在vue devtools里查過，好像資料傳成功了？

我的資料格式是這樣的：

follower = [
  {
    date: '2021-11-10',
    follower: 2000,
    following: 500,
    media: 150
  }
  {
    date: '2021-11-11',
    follower: 2000,
    following: 500,
    media: 150
  }
]

我的圖表初始化：

 <template>
   <apexchart
     ref="sample"
     width="500"
     type="area"
     :options="chartOptions"
     :series="series"
  >
  </apexchart>
 </template>

export default {
  name: "FollowerLineApex",
  components: {
    apexcharts: VueApexCharts,
  },
  data: function() {
    return {
      series: [{
        name: 'test',
        data: []
      }],
      chartOptions: {
        chart: {
          height: 350,
          type: 'area',
        },
        dataLabels: {
          enabled: true
        },
        title: {
          text: 'Example-1',
        },
        xaxis: {
          type: "datetime"
        },
     }
  }

},

下面是我在 Axios 部分的代碼：

created: function () {
  this.getData()
},

methods: {
  getData() {
    this.$axios.get('/api/')
        .then(res => {
          this.series = [{
            data: res.data["follower"]
          }]
          console.log(this.series)
          this.$refs.sample.updateOptions({
            series: [{
              data: this.series
            }]
          })
        })
        .catch(err => {
          console.log(err);
        })
  }
},

uj5u.com熱心網友回復：

您的資料格式不正確。在將資料傳遞給圖表系列之前，您需要對從 api 獲得的資料進行格式化。您的datetimexaxis 圖表應格式化為 x,y 坐標陣列。此處描述https://apexcharts.com/docs/series/

例子：

  [
    {
      x: 10,
      y: 20,
    },
    {
      x: 100,
      y: 50,
    },
  ]

作業沙箱示例

https://codesandbox.io/s/vue-basic-example-forked-r26j6?file=/src/components/Chart.component.vue

<template>
  <div class="app">
    <apexcharts
      width="500"
      height="350"
      type="area"
      :options="chartOptions"
      :series="series"
    ></apexcharts>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
  name: "Chart",
  components: {
    apexcharts: VueApexCharts,
  },
  data: function () {
    return {
      follower: [
        {
          date: "2021-11-10",
          follower: 2000,
          following: 500,
          media: 150,
        },
        {
          date: "2021-11-11",
          follower: 2000,
          following: 500,
          media: 30,
        },
      ],
      series: [
        {
          name: "test",
          data: [],
        },
      ],
      chartOptions: {
        chart: {
          height: 350,
          type: "area",
        },
        dataLabels: {
          enabled: true,
        },
        title: {
          text: "Example-1",
        },
        xaxis: {
          type: "datetime",
        },
      },
    };
  },
  created: function () {
    this.getData();
  },
  methods: {
    getData() {
      
      // TODO Axios to get data here.

      // Format data correctly
      let formattedData = this.follower.map((e, i) => {
        return {
          x: e.date,
          y: e.media,
        };
      });

      // update the series with axios data
      this.series = [
        {
          name: "test",
          data: formattedData,
        },
      ];      
    },
  },
};
</script>

uj5u.com熱心網友回復：

您已將VueApexCharts組件注冊為apexcharts(plural)，因此您應該<apexcharts>在模板中使用(plural) 或將其注冊為apexchart...

components: {
  apexchart: VueApexCharts
}

根據檔案，您無需手動呼叫updateOptions...

更新你的 Vue 圖表資料很簡單。您只需要更新傳遞給<apexchart>組件的系列道具，它就會自動觸發事件來更新圖表。

您需要做的是將資料格式化為圖表可以使用的內容

data: () => ({
  followerData: [],
  chartOptions: { /* same as you already have */ }
}),
computed: {
  // compute series data from you API results
  series: ({ followerData }) => {
    const series = followerData.reduce((map, { date, ...points }) => {
      Object.entries(points).forEach(([ name, point ]) => {
        const s = (map.has(name) ? map : map.set(name, [])).get(name)
    
        s.push({
          x: date,
          y: point
        })
      })
      return map
    }, new Map())

    return Array.from(series.entries(), ([ name, data ]) => ({
      name,
      data
    }))
  }
},
methods: {
  async getData() {
    const { data } = await this.$axios.get("/api/")
    this.followerData = data
  }
},
created () {
  this.getData()
}

標籤：javascript Vue.js 公理 顶点图表

上一篇：如何在React中將JSON陣列設定為狀態？

下一篇：為什么JS在babel腳本中找不到這個函式？