vue.js - 如何将带有axios.get（）数组数据的渲染条形图导出到vue中更高级别的组件

问题描述

我在父 vue 页面上显示一系列图表 vue 组件。在使用其中一个图表测试 axios 调用时，我能够返回一个列表来填充 bardata。我一直在跟踪 this.bardata 直到 mount() 方法，当我调用 this.renderChart(this.bardata,this.options) 时，bardata 似乎消失了。

当前条形图组件：

<script>
  import axios from 'axios'
  //Importing Bar class from the vue-chartjs wrapper
  import { Bar, mixins } from 'vue-chartjs'
  const API_URL = 'http://localhost:58881'
  //Exporting this so it can be used in other components
  export default {
    extends: Bar,
    mixins: [mixins.reactiveData],
    data () {
      return {
        bardata: {
              labels: ['Failed', 'Successful', 'Total'],
              datasets: [
              {
                label: 'Attempts',
                backgroundColor: '#455A64',
                //Data to be represented on y-axis
                data: null,
                borderWidth: 1
              }
              ]
            },
        //Chart.js options that controls the appearance of the chart
        options: {
          title : {
            display : true,
            position : "top",
            text : "",
            fontSize : 18,
            fontColor : "#111"
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false,
          scales : {
            yAxes : [{
            ticks : {
              min : 0
            }
            }]
          }
        }
      };
    },
    mounted () {
      //renderChart function renders the chart with the datacollection and options object.
      console.log(this.bardata)
      this.renderChart(this.bardata, this.options)
    },
    created() {
        axios.get(API_URL + "/api/admin/GetChart" ,{
          params:{
          chartName: 'LoginsBarChart',
          userToken: this.userToken,
        } ,
        headers: {
          token: this.userToken
        }
        }).then(response => {
            this.bardata.datasets.data = response.data
        })          
      }
  }
</script>

在我的浏览器控制台中，this.bardata 显示了适当的数组 [0,2,2]。

这是我的父 vue，它显示图表组件：

<template>
  <section class="container">
    <h1>Usage Analysis Dashboard</h1>
    <div class="Chart">
      <div class="column">
        <h3>Logins vs Failures</h3>
        <logins-bar-chart></logins-bar-chart>
      </div>
    </div>
  </section>
</template>

<script>
  import LoginsBarChart from '@/components/LoginsBarChart.vue'

  export default {
    name: 'VueChartJS',
    components: {
      // Bar Chart 
        LoginsBarChart,
    }
  }
</script>

控制台和前端图片（第一次发布，需要 10 声望才能发布实际图片）

总的来说，我看不出哪里出错了，如果数组一直正确，甚至在mounted() 方法内部，为什么图表没有填充到浏览器上？

在创建 axios 调用之前，在 bardata.datasets.data 中，我将硬编码 [0,2,2]，

 bardata: {
              labels: ['Failed', 'Successful', 'Total'],
              datasets: [
              {
                label: 'Attempts',
                backgroundColor: '#455A64',
                //Data to be represented on y-axis
                data: null,
                borderWidth: 1
              }
              ]
            },

图表会显示得很好。

标签： vue.jsaxiosvue-chartjs

问题是您正在对以承诺结尾的已创建方法进行请求。在挂载方法运行之前，这个承诺不会总是解决。我的建议是将 renderChart 调用移动到创建方法上的 .then

mounted () {
  //renderChart function renders the chart with the datacollection and options object.
  console.log(this.bardata)

},
created() {
    axios.get(API_URL + "/api/admin/GetChart" ,{
      params:{
      chartName: 'LoginsBarChart',
      userToken: this.userToken,
    } ,
    headers: {
      token: this.userToken
    }
    }).then(response => {
        this.bardata.datasets.data = response.data
        this.renderChart(this.bardata, this.options)
    })          
  }

vue.js - 如何将带有axios.get（）数组数据的渲染条形图导出到vue中更高级别的组件

问题描述

解决方案

推荐阅读