Question

这是我的VueJS组件脚本，应在仪表板内显示数据。

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
//import stockInit from "highcharts/modules/stock";

//stockInit(Highcharts);
exportingInit(Highcharts);

export default {
  props: {
    partsdata: {
      type: Array
    }
  },
  methods: {
    fetchData() {
      this.$http.get('http://127.0.0.1:5000/data/')
      .then(response => {
        return response.json();
      }).then(data => {
        var result = JSON.parse(data) // eslint-disable-line no-console
        console.log(result.Fare) // eslint-disable-line no-console
      })
    }
  },
  components: {
    highcharts: Chart
  },

  data() {
    return {
      chartOptions: {
        series: [{
          data: [] // sample data
        }]
      }
    }
  }
};
</script>

从后端接收数据可以正常工作，但是我无法将其纳入图表。我仍在努力处理异步任务，因此尝试了此尝试并失败了

this.data.push(result.Fare)

Header.vue？5e07：33未捕获（承诺）TypeError：无法读取未定义的属性“推” 在VueComponent.eval（Header.vue？5e07：34）

谁能告诉我该怎么做？

更新：这是我触发方法的模板：

<template>
  <div>
    <button @click="fetchData" class="btn-primary">Get Data</button>
    <highcharts
      :options="chartOptions"
    ></highcharts>

  </div>
</template>

Answer 1

如果您正在尝试this.data.push，请看一下代码，这是可以理解的，因为它告诉您未定义的代码。要使用fetchData方法访问数据道具，必须使用 this.chartOptions.series[0].data.push 我不确定在该代码中您在哪里触发fetchData。尝试将其移动到vue生命周期中创建/安装的方法中，然后可以将chartOptions更改为计算或观察者，在data（）方法中设置数据，并使用this.data在chartOptions中调用它。

更新：如果触发，则单击就可以满足您的请求，然后将其设置为多数民众赞成。我重构了您的请求，如果在您测试它时成功，则response.data应该会为您提供所需的结果，不确定是否需要解析它，除非它以字符串形式返回json blob？我还向您的图表渲染器添加了v-if，如果this.data为空，则不渲染。看看您如何处理。

import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
//import stockInit from "highcharts/modules/stock";

//stockInit(Highcharts);
exportingInit(Highcharts);

export default {
  props: {
    partsdata: {
      type: Array
    }
  },
  methods: {
    fetchData() {
      this.$http.get('http://127.0.0.1:5000/data/')
      .then(response => {
        this.data.push(JSON.parse(response.data))
      })
    }
  },
  watch: {
    data: function() {
     this.chartOptions.series[0].data.push(this.data)
    }

  },
  components: {
    highcharts: Chart
  },

  data() {
    return {
      data: [],
      chartOptions: {
        series: [{
          data: [] // sample data
        }]
      }
    }
  }
};
</script>

    <template>
        <div>
            <button @click="fetchData" class="btn-primary">Get Data</button>
            <highcharts if="data.length > 0" :options="chartOptions" ></highcharts>

        </div>
    </template>

Answer 2

您需要正确获取数据并更改chartOptions：

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
    <button @click="fetchData" class="btn-primary">Get Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      fetch('https://api.myjson.com/bins/ztyb0')
      .then(response => {
        return response.json()
      })
      .then(data => {
        this.chartOptions.series[0].data = data;
      })
    }
  },
  data() {
    return {
      chartOptions: {
        series: [{
          data: []
        }]
      }
    };
  }
};
</script>

实时演示： https://codesandbox.io/s/highcharts-vue-demo-05mpo

文档： https://www.npmjs.com/package/highcharts-vue

VueJS应用将来自GET请求的数据放入数组

2 个答案: