aboutView.vue

<template>
  <div class="row">
    <div class="col-md-6">
      <canvas id="myChart"></canvas>
    </div>
    <div class="col-md-6">
      <select class="form-select" v-model="year" v-on:change="getTotalByYear(year)">
        <option selected>Escolha o ano</option>
        <option v-for="(year, index) in years" :key="index" :value="year">{{ year }}</option>
      </select>
    </div>
  </div>

</template>

<script>
import Chart from "chart.js/auto";
import axios from "axios";

export default {
  name: 'AboutView',
  components: {},
  data() {
    return {
      labels: [],
      master: [],
      doctoral: [],
      postDoctoral: [],
      years: [2022, 2021, 2020, 20219],
      year: 2022,
    };
  },
  methods: {
    stackedBar(labels, master, doctoral, postDoctoral) {

      let ctx = document.getElementById('myChart')
      let stakedBar = null

      const data = {
        labels: labels,
        datasets: [
          {
            label: 'MESTRADO',
            axis: 'y',
            data: master,
            fill: true,
            backgroundColor: [
              '#0571b0',
            ],
          },
          {
            label: 'DOUTORADO PLENO',
            axis: 'y',
            data: doctoral,
            fill: true,
            backgroundColor: [
              '#8ad714',
            ],
          },
          {
            label: 'PÓS-DOUTORADO',
            axis: 'y',
            data: postDoctoral,
            fill: true,
            backgroundColor: [
              '#ca0020',
            ],
          },
        ]
      }

      const config = {
        type: 'bar',
        data: data,
        options: {
          indexAxis: 'y',
          plugins: {
            title: {
              display: true,
              text: 'Distribuição de Bolsa por Grande Área'
            },
          },
          responsive: true,
          scales: {
            x: {
              stacked: true,
            },
            y: {
              stacked: true
            }
          }
        }
      };

      if (stakedBar) {
        stakedBar.destroy()
      }

      stakedBar = new Chart(ctx, config);
    },

    getTotalByYear(year) {
      axios
          .get(`http://localhost:8000/api/geocapes/bolsa-grande-area-ano/?&ano=${year}`)
          .then((response) => {
            this.labels = response.data.map(data => data.grande_area)
            this.master = response.data.map(data => data.total_mestrado)
            this.doctoral = response.data.map(data => data.total_doutorado_pleno)
            this.postDoctoral = response.data.map(data => data.total_pos_doutorado)

            this.stackedBar(this.labels, this.master, this.doctoral, this.postDoctoral)
          })
    }

  },
  mounted() {
    this.getTotalByYear(this.year)
  }
}

</script>

<style>

</style>