Question

我想绘制循环中的所有图表，但无法弄清楚为什么它只能正确绘制最后一个图表。我的意思是，所有图表都已呈现，但是悬停选项仅适用于循环中的最后一个图表，其余所有图表均无法与之交互。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {



        let allCharts = document.createElement("DIV");
        allCharts.setAttribute('id', 'all-charts');
        document.body.appendChild(allCharts);

        <?php for($i = 0; $i < 15; $i++) { ?>

            <?php if($someVar[$i] === null) { continue; } ?>

            allCharts.innerHTML += `<div id="piechart<?=$i;?>" style="width: 450px; height: 250px;"></div>`;

            let data<?=$i;?> = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Some bills',     <?= $someVar[$i]['bills']; ?>],
                ['Debts',      <?= $someVar[$i]['Debts']?>]
            ]);

            let options<?=$i;?> = {
                title: 'Name of title <?= $title[$i]; ?>: ' + <?= $someVar[$i]['bills'] ?> + ' EUR',
                pieSliceText: 'value-and-percentage'
            };

            let chart<?=$i;?> = new google.visualization.PieChart(document.getElementById('piechart<?=$i;?>'));

            chart<?=$i;?>.draw(data<?=$i;?>, options<?=$i;?>);

        <?php } ?>
    }
}
</script>

Google饼图仅可悬停在最后一个图表上

0 个答案: