在 javascript 中組合多個相似的 function

Question

我在 10 mysql 表中有數據，我想將它們顯示為圖表。 我想讓 function 每次點擊只顯示一個圖表。 到目前為止，我對每個 html 標簽和 js function 進行硬編碼，硬編碼是

<p onclick="dOgan()">display ogan</p>
<p onclick="dKomering()">display komering</p>

<canvas id="ogan" width="200" height="120" style="display: block;" class="show"></canvas>
<canvas id="komering" width="200" height="120" style="display: block;" class="show"></canvas>

    var ctx = document.getElementById(`ogan`);
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [<?php while ($t = mysqli_fetch_array($time)) {
                            echo '"' . $t['time'] . '",';
                        } ?>],
            datasets: [{
                label: `ogan`,
                data: [<?php while ($v = mysqli_fetch_array($water_level)) {
                            echo '"' . $v['water_level'] . '",';
                        } ?>],
                backgroundColor: 'rgba(35,137,218, 0.7)',
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

var station = document.querySelectorAll("#komering, #ogan");
function dOgan() {
    for (var i = 0; i < station.length; i++) {
        station[i].style.display = 'none';
        document.querySelector('#ogan').style.display = "block";
    }
}

function dKomering() {
    for (var i = 0; i < station.length; i++) {
        station[i].style.display = 'none';
        document.querySelector('#komering').style.display = "block";
    }
}

我正在使用 chartJS 制作圖表。 我怎樣才能在沒有硬編碼的情況下制作它？ 我嘗試使用循環，但沒有任何效果，我不完全理解循環，php-javascript 組合也讓我很困惑。 任何幫助將不勝感激，謝謝。

Answer 1

我注意到在您將值添加到標簽列表的代碼中，您在每個循環的末尾添加了一個逗號，即使在最后一次迭代中也是如此。 這可能會導致錯誤，因為 chartJS 期望另一個值，但相反，您將在那里結束數據列表。 我建議對最后一個沒有附加逗號的循環使用不同的 echo 語句。 這可以解決您的錯誤。 如果沒有出現，我使用了chartJS，發現這些值將通過內置的 function 更新： myChart.update(); 應該管用。 如果所有這些都沒有發生，請檢查控制台是否有任何錯誤。