更新数据后Chartjs意外调整大小和裁剪。使用laravel blade view和Livewire

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

我认为你应该在你的canvas标签中添加wire:ignore，如果是一个组件的一部分，它将通过Livewire重新渲染到初始状态。

https:/laravel-livewire.comdocsthird-party-libraries）。查找section => 忽略DOM变化(使用wire:ignore)