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

@kameron 

Для построения графика с использованием библиотеки Chart.js и данных, полученных с помощью библиотеки Axios в Vue.js, необходимо выполнить следующие шаги:

1. Установите библиотеку Chart.js и Axios с помощью npm:

1

npm install chart.js axios --save

1. Импортируйте библиотеки Chart.js и Axios в компонент Vue:

1
2

import Chart from 'chart.js';
import axios from 'axios';

1. Создайте пустой элемент canvas в шаблоне компонента, в котором будет отображаться график:

1
2
3
4
5

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

1. В методе mounted компонента Vue создайте экземпляр графика Chart.js и получите данные с помощью Axios:

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

export default {
  mounted() {
    axios.get('https://example.com/data').then(response => {
      const data = response.data;

      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: data.labels,
          datasets: [{
            label: 'My First Dataset',
            data: data.values,
            fill: false,
            borderColor: 'rgb(255, 99, 132)',
            tension: 0.1
          }]
        },
        options: {}
      });
    });
  }
};

В этом примере мы отправляем запрос на сервер с помощью Axios и получаем данные в ответе. Затем мы создаем экземпляр графика Chart.js и передаем ему данные в формате, необходимом для построения графика. В этом примере мы строим линейный график с одним набором данных.

Важно отметить, что это только пример, и формат данных и настройки графика могут отличаться в зависимости от требований вашего проекта.