將數據從 API 加載到 highcharts vue 組件中

Question

我正在嘗試將快速 api 中的數據加載到我的 highcharts-vue 組件中，但我無法將數據解析到我的圖表中。 Express 讓我知道我的 vue 組件正在向 API、Postman 發出 GET 請求，讓我知道 GET 請求返回一組日期和 env_light 值，但 Vue 似乎沒有加載，或者沒有用新數據更新我的圖表

ChartDisplay.vue（組件）

<template>
  <div class="chartElem">
    <div class="row">
      <highcharts :options="chartOptions"></highcharts>
    </div>
  </div>
</template>

<script>
import { Chart } from 'highcharts-vue';
import axios from 'axios';

export default {
  name: 'ChartDisplay',
  components: { highcharts: Chart },
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'spline',
        },
        title: {
          text: 'Environment - Light',
        },
        series: [{
          data: [],
          color: '#6fcd98',
        }],
      },
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    async fillData() {
      await axios.get('http://localhost:4000/api/db/env_light')
        .then((response) => {
          this.chartOptions.series[0].data = response.data.map((m) => m.env_light);
        });
    },
  },
};
</script>

當我在 Vue 應用程序之外測試它時，fillData function 按預期工作，並將值數組返回到 this.chartOptions.series[0].data，如果我手動將值插入數據數組，圖表會自動工作和更新並保存文件。

我還嘗試將我的數據庫從 300 多個條目清除到 5 個，以防出現數組長度問題，並且我嘗試將數據解析為這樣的結構 - 均不成功

.then((response) => {
  this.chartOptions = {
    series: [{
      data: response.data.map((m) => m.env_light),
    }],
  };
});

因為當我刷新站點時應用程序正在向 API 發出獲取請求，所以我知道正在執行 fillData 方法，並且因為當我手動將值插入數組時應用程序實際上正在更新更改，這讓我相信默認的更新機制因為圖表正在工作。 我如何解析數據還有問題嗎？ 這是我的第一個 Vue 應用程序，所以我對解決方案或如何進一步研究該問題感到有點困惑和缺乏想法 - 任何建議都將不勝感激！

Answer 1

這里的問題是該series是一個數組，而不是 object。 因此，您正在訪問包含對象的數組的data屬性，而不是 object 本身。 您真正想要的是訪問series數組的第一個元素的data屬性。

this.chartOptions.series[0].data = ...