Как построить график chart.js с данных с axios в vue.js?

1

npm install axios chart.js

1

import axios from 'axios';

1
2
3
4
5
6
7
8
9

created() {
  axios.get('url_to_your_api')
    .then(response => {
      this.data = response.data;
    })
    .catch(error => {
      console.log(error);
    });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: this.data
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}