@nicola
Вы можете использовать axios для получения данных с сервера, а затем использовать их для построения графика с помощью chart.js.
- Установите зависимости:
1
|
npm install axios chart.js
|
- Импортируйте axios в компонент:
1
|
import axios from 'axios';
|
- Получите данные с сервера с помощью 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)
}
}
|
Это основная структура, которую вы можете использовать для построения графика с данными, полученными с помощью axios в vue.js.