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

Question

我的图表最初是通过下面显示的代码加载的。这很好用。

然后通过 Livewire 事件更新数据。我可以在源中的数据属性中看到数据在 myChart object 中正确更新，所以这似乎也有效。

问题是更新后图表呈现不正确。它被裁剪了，看起来放大了，第一次加载时大约是原始尺寸的 20% 左右。因此，我看不到数据刷新和更新是否正确发生，但正如我在源代码中看到的那样，数据在 object 中正确更新。

更新

Livewire re-renders 下面的所有内容，因此实际上不需要更新数据，因为这已经发生了。不确定为什么在更新页面时图表无法正确呈现。使用 .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 添加到您的 canvas 标记中，如果它是组件的一部分，它将通过 Livewire 重新呈现为初始状态。

https://laravel-livewire.com/docs/third-party-libraries/ 查找部分 => Ignoring DOM-changes (using wire:ignore)

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

Chartjs unexpected resize and crop after updating data. Using laravel blade view and Livewire

laravel

chart.js

laravel-livewire