渲染包含 Google Charts 的多个 Livewire 组件，这些组件错误地都显示相同的数据

Posted 2023-02-22

【中文标题】渲染包含 Google Charts 的多个 Livewire 组件，这些组件错误地都显示相同的数据

【英文标题】：Rendering multiple Livewire components containing Google Charts, which incorrectly all display the same data

【发布时间】：2021-10-18 19:15:40

【问题描述】：

我正在使用 Laravel 8 和 Livewire，并且有一个组件可以动态显示许多图表。因此，在这个主要组件中，我在 foreach 循环中创建了任意数量的 productiv-component 类型的子组件：

<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 py-3 px-3">
@foreach($customer as $k)
    @livewire('productiv-component', ['planedTimeData' => $planedTimeDataArray[$k->id],
    'employeeTimeData' => $employeeTimeData[$k->id]], key('cust-'.$k->id))
@endforeach

productiv-component 本身包含 Google 图表的代码。我将为此的数据从主组件传递到子组件。

 <div class="px-4 py-0 col-span-3"> 
//setRandom() generates a random number and stores it in the variable random, 
//so that the chart ID is unique and the charts are displayed again when rerendering
\App\Http\Livewire\KpiProductivComponent::setRandom()
<div id="chart$random" style="height: 275px"></div>
<script>
    var chartData = <?php echo ($chart); ?>;
    google.charts.setOnLoadCallback(lineChart);
    function lineChart() 
        var data = google.visualization.arrayToDataTable(chartData);
        var options = 
            curveType: 'line',
            legend: 
                position: 'bottom'
            ,
            backgroundColor: 'transparent',
            lineWidth: 3,
            chartArea:   width: "90%", height: "60%" 
        ;
        var chart = new google.visualization.LineChart(document.getElementById('chart$random'));
        chart.draw(data, options);
    
</script>

现在的问题是图表都呈现相同的数据，即使它绝对不相同。此外，当我在 Google Chart 的代码中输出 chartData 变量时，每个图表的不同数据集都正确到达，它们只是无法正确呈现。最后呈现的图表的映射也适用于所有以前的图表。如果我只渲染一个图表，它会正确渲染，所以错误似乎是因为我多次使用同一个组件来处理新数据。

all charts render the same data although they are definitely different

这也是一个带有浏览器输出的图像，您可以在其中看到两个图表获取不同的数据集并且还分配了不同的 id，即使呈现的是相同的图表

Rendered charts with code within the browser

有人对这可能是什么有任何想法吗？ 非常感谢。

【问题讨论】：

指令中有错字吗？？？一些']'丢失

你是绝对正确的，但不幸的是，在这里和我的代码中传输时发生的错误] 并没有丢失。感谢您的快速响应

【参考方案1】：

我找到了解决方案。在谷歌图表的标签中多次使用 var chartData 似乎是一个问题。我把传过来的数据直接放到linechart函数中，现在可以正常使用了。

<script>
    function lineChart() 
        var data = google.visualization.arrayToDataTable(<?php echo ($chart); ?>);