同一页面上动态的chart.js图表​​数量

Question

我试图在PHP脚本的单个页面上放置多个graph.js生成的图形。由于图表的数量可能会有所不同，我不知道如何避免多次加载window.onload函数的问题。因此，此处和网络上的其他解决方案对我来说并不起作用。唯一的最后一张图表是获取内容，所有以前的画布都保持空白。请指出我正确的方向。

以下是我要做的事情：

    while ($payment = mysqli_fetch_array($r)) {

        if($Year != $payment['Year']) {
            $Year = $payment['Year'];
    ?>
    <div style="font-weight:bold; text-align:left; padding-left:20px; <?php if ($Year > 0) { ?> margin-top:15px; <?php } ?> border-bottom:1px solid #CCC; border-top:1px solid #CCC; background-color:#EEE; color:#666">
    payments in the year <?php echo $payment['Year']; ?>
    </div>

    <!--  -->

        <div style="width: 40%">
             //generate an unique  canvas id
            <canvas id="<?php echo $payment['Year']; ?>"></canvas>
        </div>
        <script>
            var barChartData = {
                labels: ["l1test", "l2test", "l3test"],
                datasets: [{
                    backgroundColor: "rgba(44,129,54,0.9)",
                    data: [2, 23, 24]
                }]
            };
            window.onload = function () {
                var ctx = document.getElementById("<?php echo $payment['Year']; ?>").getContext("2d");
                window.myBar = new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        title: {
                            display: false,
                            text: "legend"
                        },
                        tooltips: {
                            mode: 'label'
                        },
                        responsive: true,
                        scales: {
                            xAxes: [{
                                stacked: true
                            }],
                            yAxes: [{
                                stacked: true
                            }]
                        }
                    }
                });
            };
        </script>
}//end of while loop here

谢谢！

Answer 1

如何创建一个唯一的ID，检查它没有被使用，使用它，如下所示：

$keys = array();
$from = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

while ($payment = mysqli_fetch_array($r)) {
    do {
        $key = '';
        for ($i = 0; $i < 10; $i++) {
            $key .= substr($from, rand(0, strlen($from) -1), 1);
        }
    } while (in_array($key, $keys));
    $keys[] = $key;

    // use $key for the ID

}

Answer 2

最后我确实包含了jQuery，将canvas id...更改为canvas class并使用以下jQuery代码创建了一个文件script.js，我为每个类调用了window.onload函数。

$(function($) {
    $('.chart').each(function (index, element) {
        var ctx = element.getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title: {
                    display: false,
                    text: 'Bierkonsum'
                },
                tooltips: {
                    mode: 'label'
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });

    });
});(jQuery);