Question

我的图表最初是通过以下代码加载的。效果很好。

然后通过Livewire事件更新数据。我可以在源代码的data属性中看到myChart对象中的数据已正确更新，因此这似乎也可以正常工作。

问题在于更新后，图表呈现不正确。它被裁剪，似乎放大了，在第一次加载时大约是原始大小的20％左右。因此，我看不到数据刷新和更新是否正确进行，但是如所示，我可以在源代码中看到对象中的数据正确更新。

更新

Livewire重新渲染了下面的全部内容，因此实际上并不需要更新数据。不确定为什么更新页面时图表无法正确显示。使用.clear()或.render()方法无效。

<canvas id="myChart" height="100"></canvas>

<script>
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
labels: [
    @foreach($chart_data as $d)
        '{{ $d['date'] }}',
    @endforeach
],
datasets: [{ 
    data: [
        @foreach($chart_data as $d)
            {{ $d['score'] }},
        @endforeach
    ],

// ... rest of all the Chart config left out for readability

document.addEventListener("livewire:load", function(event) {
window.livewire.hook('afterDomUpdate', () => {

    var updatedLabels = [
        @foreach($chart_data as $d)
            '{{ $d['date'] }}',
        @endforeach
    ];

    var updatedData = [
        @foreach($chart_data as $d)
            {{ $d['score'] }},
        @endforeach
    ];

    myChart.data.labels.push(updatedLabels);
    myChart.data.datasets.forEach((dataset) => {
        dataset.data.push(updatedData);
    });

    myChart.update({
        duration: 800,
        easing: 'easeOutBounce'
    });

});
});
</script>

Answer 1

我认为您应该在画布标签上添加wire：ignore，如果组件的一部分将被Livewire重新呈现为初始状态。

https://laravel-livewire.com/docs/third-party-libraries/ 查找部分=>忽略DOM更改（使用wire：ignore）

在更新数据后，Chartjs意外调整大小并裁剪。使用laravel刀片视图和Livewire

1 个答案: