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

Question

我正在使用Laravel 8与Livewire，并有一个组件，应该动态显示许多图表。因此，在这个主组件中，我在foreach循环中创建了任意数量的生产性组件类型的子组件:

<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

productivo -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
{{AppHttpLivewireKpiProductivComponent::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变量时，每个图表的不同数据集都正确到达，它们只是没有正确呈现。最后渲染的图表的映射也应用到之前的所有图表。如果我只呈现一个图表，它是正确呈现的，所以出现错误似乎是因为我对新数据多次使用相同的组件。

所有的图表呈现相同的数据，尽管它们肯定是不同的

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

使用浏览器内的代码呈现图表

有人知道这可能是什么吗?非常感谢。

Answer 1

我找到了一个解决方案。这似乎是一个问题，在谷歌图表的标签中多次使用var chartData。我把传递的数据直接放在linechart函数中，现在它工作得很好。

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