объединить несколько похожих функций в javascript

Question

У меня есть данные внутри таблицы 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";
    }
}

Я использую диаграмму JS для создания диаграммы. Как я могу обойтись без жесткого кодирования ?. Я пробовал использовать l oop, но ничего не получилось, я не совсем понимаю l oop, также комбинация php - javascript меня просто смутила. любая помощь будет оценена, спасибо.

Answer 1

Я заметил, что в вашем коде, где вы добавляли значения в список меток, вы добавляете запятую в конце каждого l oop, даже на последней итерации. Это может вызвать ошибку, поскольку диаграмма JS ожидает другое значение, но вместо этого вы завершаете список данных на этом. Я бы посоветовал использовать другой оператор эха для последнего l oop, где запятая не добавляется в конце. Это может исправить вашу ошибку. Если ничего не отображается, я использовал диаграмму JS и обнаружил, что значения будут обновляться с помощью встроенной функции: myChart.update(); должно работать. Если после всего этого ничего не происходит, проверьте консоль на наличие ошибок.