диаграмма js не отображает массив данных, полученный из запроса ax ios - PullRequest
Новая
       40

диаграмма js не отображает массив данных, полученный из запроса ax ios

0 голосов
/ 06 августа 2020

У меня есть конечная точка API, которая возвращает массив из 24 значений, которые я хочу использовать в своей диаграмме js в компоненте vue.

при загрузке страницы я не получаю ошибок, но полосы на диаграммах просто не отображаются, и я не знаю почему.

EDIT: я заметил, что функция asyn c возвращает обещание вместо фактических данных: 

  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

1 Ответ

0 голосов
/ 09 августа 2020

Оказывается, когда вы пытаетесь обновить вложенные данные, компонент не перерисовывается. Вот как я решил это: я помещаю весь объект в функцию обновления и вызываю эту функцию, когда получаю свои данные из серверной части, надеюсь, это поможет!: 

 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()
 },
...