将数据从 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 = ...