在javascript中组合多个类似的功能答案

【问题标题】：combine multiple similar function in javascript在javascript中组合多个类似的功能
【发布时间】：2020-06-17 17:24:04
【问题描述】：

我在 10 个 mysql 表中有数据，我想将它们显示为图表。我想让函数每次点击只显示一个图表。到目前为止，我对每个 html 标签和 js 函数都进行了硬编码，硬编码是

<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 组合也让我很困惑。任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： javascript php loops

【解决方案1】：

我注意到在您将值添加到标签列表的代码中，您在每个循环的末尾添加了一个逗号，即使在最后一次迭代中也是如此。这可能会导致错误，因为 chartJS 期望另一个值，但相反，您将在那里结束数据列表。我建议对最后一个没有附加逗号的循环使用不同的 echo 语句。这可以解决您的错误。如果没有出现，我使用了 chartJS，发现这些值将通过内置函数更新：myChart.update(); 应该可以工作。如果所有这些都没有发生，请检查控制台是否有任何错误。

【讨论】：