@msdoc11

Как сделать обновление данных chart js vue chartjs?

Привет, есть код

<template>
  <Bar
      :data="chartData"
      :options="chartOptions"
    />
</template>
<script setup>
import { Chart, Title, Tooltip, BarElement, CategoryScale, LinearScale } from 'chart.js'
Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip)
import { Bar } from 'vue-chartjs';

const chartData = ref({
  labels: leads.value.monthLeadAll?.map(i => i.dataLead) ?? [],

  datasets: [{
         label: "Все",
         backgroundColor: '#eee',
         data: leads.value.monthLeadAll?.map(i => i.allLeads) ?? [],
      },
      {
         label: "Успешные",
         backgroundColor: '#052a24',
         data: leads.value.monthLeadAll?.map(i => i.okLeads) ?? [],
      },
      {
         label: "Неудачных",
         backgroundColor: '#fed76a',
         data: leads.value.monthLeadAll?.map(i => i.failureLeads) ?? [],
      },
   ],
});
const chartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  scales: {
        y: {
            min: 0,
            ticks: {
                stepSize: 1
            }
        }
    }
})
</script>

код не полный, использую свой api для получения данных, они успешно меняются в chartData, но данные не перерисовывает, пока не перейдешь на другую страницу и назад, либо обновить страницу. Как заставить перерисовывать график с новыми данными? 

Для установки использовал npm i vue-chartjs chart.js
  • Вопрос задан
  • 182 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы