图JS未在Laravel Livewire中重新绘制

Question

无论何时发生数据更改，ChartJS都不会重新呈现图表。

这是流程。

每当我按下一个按钮，它就会触发一个事件并刷新整个图表组件。我可以看到数据正在更新({{$countPublished}})，但图表没有

有人能帮忙吗？谢谢

        <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();
            }

Answer 1

找到解决办法了。

当按下按钮及其包含在$data下的值时，必须触发发射事件。

然后把这个添加到我的刀片文件中

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,
        },
    },
    });  
})

}