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

【问题标题】：Chartjs unexpected resize and crop after updating data. Using laravel blade view and LivewireChartjs 更新数据后意外调整大小和裁剪。使用 laravel 刀片视图和 Livewire
【发布时间】：2020-05-20 13:22:28
【问题描述】：

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

然后通过 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>

【问题讨论】：

标签： laravel chart.js laravel-livewire

【解决方案1】：

我认为你应该将 wire:ignore 添加到你的画布标签中，如果它是组件的一部分，它将由 Livewire 重新呈现为初始状态。

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

【讨论】：