0

我的图表最初是通过下面显示的代码加载的。这工作正常。

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

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

更新

Livewire 会重新渲染下面的整个内容，因此实际上不需要更新数据，因为这已经发生了。不确定为什么更新页面时图表未正确呈现。使用.clear()or.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>
4

1 回答 1

1

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

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

于 2020-05-23T18:42:29.133 回答