Highchart 重新加载不起作用但消失了

Question

我在个人项目中使用 Livewire 3.5 以及 Highcharts.js。 当我第一次渲染我的组件时，一切正常，我的图表正确显示。

然后我更改我的选择，组件再次呈现，到处都有正确的数据。 但是我的 Highchart div 被清空了，即使我调度一个被我的

document.addEventListener

捕获的事件，Highchart 也不会再次渲染，即使我在其中复制/粘贴完全相同的代码...

这里是一些带注释的代码，带有最简单的 Highchart 对象。此代码位于我的 resources/views/livewire/display.blade.php 中

在第一次组件渲染时，我可以看到“第一次渲染时：这里！”在我的控制台中。 然后我更新，我的选择，调度完成得很好，“更新”显示在我的控制台中......但是我有一个带有“标题”的图表的div现在消失了。

@script
<script>

    $(document).ready( function () {
        console.log('On first render : HERE !');
        chart_reel = Highcharts.chart('hemicycle-reel', {
            chart: {
                type: 'item'
            },
            title: {
                text: 'TITLE'
            }
        });

        document.addEventListener('on-change', () => {
            console.log('UPDATE');
            chart_reel = Highcharts.chart('hemicycle-reel', {
                chart: {
                    type: 'item'
                },
                title: {
                    text: 'NEW TITLE'
                }
            });
        });
    });

</script>
@endscript

现在，如果我尝试使用超时而不是

document.addEventListener

来更新代码，它可以正常工作：标题在 2000 毫秒后更改。

@script
<script>

    $(document).ready( function () {
        console.log('On first render : HERE !');
        chart_reel = Highcharts.chart('hemicycle-reel', {
            chart: {
                type: 'item'
            },
            title: {
                text: 'TITLE'
            }
        });

        setTimeout(function () {
            console.log('UPDATE');
            chart_reel = Highcharts.chart('hemicycle-reel', {
                chart: {
                    type: 'item'
                },
                title: {
                    text: 'NEW TITLE'
                }
            });
        }, 2000);
    });

</script>
@endscript

这就是我在 Livewire 论坛上寻求帮助的原因:-)

感谢您的帮助:-)

Answer 1

你应该展示类和视图的相关代码，并且还需要一个数据示例。

无论如何，在这种情况下，要做的第一件事就是用带有 wire:ignore 属性的

包装由 javascript 库管理的标签（在您的情况下是Highchart）。

<div wire:ignore>

   <div id="hemicycle-reel" ..... > </div>

</div>

这样 Livewire 就不会干扰该标签