将数据从 API 加载到 highcharts vue 组件中

Question

我正在尝试将来自 express api 的数据加载到我的 highcharts-vue 组件中，但我无法将数据解析到我的图表中。 Express 让我知道我的 vue 组件正在向 API 发出 GET 请求，Postman 让我知道 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 函数按预期工作，并将值数组返回到 this.chartOptions.series[0].data，如果我手动插入值，图表会自动工作并更新数据数组并保存文件。

我还尝试将我的数据库从 300 多个条目清除为 5 个，以防出现数组长度问题，并且我尝试将数据解析为这样的结构 - 均未成功

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

因为当我刷新网站时应用程序正在向 API 发出 get 请求，所以我知道 fillData 方法正在执行，并且因为当我手动将值插入数组时应用程序实际上正在更新更改，这让我相信图表的默认更新机制正在运行。我如何解析数据还有问题吗？这是我的第一个 Vue 应用程序，所以对于解决方案或如何进一步研究该问题，我有点困惑和缺乏想法 - 任何建议都将不胜感激！

Answer 1

这里的问题是series 是一个数组而不是一个对象。因此，您正在访问包含对象的数组的 data 属性，而不是对象本身。您真正想要的是访问series 数组的第一个元素的data 属性。

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