Привет, есть код
<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