Cada vez que hay un cambio de datos, ChartJS simplemente no vuelve a representar el gráfico.
Aquí está el flujo.
Cada vez que presiono un botón, activa un evento y actualiza todo el componente del gráfico. Puedo ver que los datos se están actualizando ({{$countPublished}}) pero el gráfico no
¿Alguien puede ayudar? Gracias
<canvas id="pieChart"></canvas> <div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"> <!-- Chart legend --> <div class="flex items-center"> <span class="inline-block w-3 h-3 mr-1 bg-red-200 rounded-full"></span> <span>Pending</span> </div> <div class="flex items-center"> <span class="inline-block w-3 h-3 mr-1 bg-purple-700 rounded-full"></span> <span>Published {{$countPublished}} </span> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"> </script> <script> /** Doughnut Chart */ var ctx = document.getElementById('pieChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: [{{$countPublished}}, {{$countunPublished}}], backgroundColor: ['#7e22ce', '#fecaca'], label: 'Post', }, ], labels: ['Published', 'Reviewing'], }, options: { responsive: true, cutoutPercentage: 60, legend: { display: false, }, }, }); function updateConfigByMutating(Chart) { myChart.data.datasets.data = [{{$countPublished}}, {{$countunPublished}}], myChart.update(); }encontró la solución.
tuvo que disparar un evento de emisión cuando se presiona el botón junto con sus valores contenidos en $ datos.
Luego agregué esto en mi archivo blade
window.onload = function() { Livewire.on('refreshCharts', ($data) => { var ctx = document.getElementById('pieChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: $data, backgroundColor: ['#7e22ce', '#fecaca'], label: 'Post', }, ], labels: ['Published', 'Reviewing'], }, options: { responsive: true, cutoutPercentage: 50, legend: { display: false, }, }, }); })}