图表js不显示来自axios请求的数据数组答案

【问题标题】：chart js not dispalying data array that comes from an axios request图表js不显示来自axios请求的数据数组
【发布时间】：2020-08-06 07:48:05
【问题描述】：

我有一个 API 端点，它返回一个包含 24 个值的数组，我想在 vue 组件中的 chartjs 中使用这些值。

当页面加载时我没有收到任何错误，但图表上的条不显示，我不知道为什么。

编辑：我注意到异步函数返回一个承诺而不是实际数据：

  async filterData() {
              await this.$axios.get('/api/data_app/job_count_by_hour/')
                  .then(response => {
                      return this.chart_data = response.data;
                  })

          }

这是数据返回代码，我有一个填充chart_data数组的函数：

        data(){
        return {
            form:{
                day: 'select day',
                workspace:'',
                machine_family: [],
                duration: []
            },
            res: [],
            total:[],
            chart_data: [],
            url: '/api/jobs/job_count_by_hour/',
            days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "sunday"],
            barChart2: {
                labels: ["6h", "7h", "8h", "9h","10h","11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h","22h", "23h", "00h"],
                datasets: [{
                        label: ["popularity"],
                        backgroundColor:"#f93232" ,
                        data: this.chart_data
                    },],
            },
        }
      },
      methods: {
          async filterData() {

              let _url = `${this.url}`
              await this.$axios.get(_url)
                  .then(response => {
                      this.chart_data = response.data;
                  })
              return this.chart_data
          },
      },
      mounted() {
        this.filterData()
      }
 }

这是图表组件：

    <script>
       import { Line } from 'vue-chartjs'

        export default {
            extends: Line,
              props: {
                chartdata: {
                 type: Object,
                 default: null
               },
         options: {
          type: Object,
          default: null
          }
         },
     mounted () {
this.renderChart(this.chartdata, this.options)
 }
}

在父组件中是这样的：

en <BarChart :labels="barChart2.labels"
         :datasets="barChart2.datasets"
         :height="100"
  >
  </BarChart>ter code here

【问题讨论】：

这能回答你的问题吗？ Vue Chart.js - Chart is not updating when data is changing
不是真的，那篇文章是关于数据不更新的，这不是我正在做的。我只是在 mount 上加载数据，但图表没有显示条形
这正是您正在做的 - 更新。您的 chart_data 最初是一个空数组，但是当您收到 axios 响应时，您会使用您的响应更新 chart_data。
您可能是对的，我查看了该问题的答案，但我不太明白，我尝试将其转换为计算变量，但整个图表无法加载跨度>
不要做类似data: this.chart_data的事情，因为当你做this.chart_data = response.data时，this.chart_data将引用新数组并且该数据不会更新。

标签： django vue.js chart.js

【解决方案1】：

事实证明，当您尝试更新嵌套数据时，组件不会重新渲染。这就是我解决它的方法，我将整个对象放在一个更新函数中，并在我从后端获取数据时调用该函数，我希望这会有所帮助！：

 methods: {
  onInput(value) {
      this.filterData()
  },
  updateChart(data) {
    this.datasets = [{
          label: ["popularity"],
          backgroundColor:"#f93232",
          data: data
      }]
  },

  async loadData() {
    await this.$axios.get(this.url)
      .then(response => {
        this.updateChart(response.data)
      })
  },
},

mounted() {
   this.loadData()
 },

【讨论】：