График 1 зависает, когда функция вызывается во второй раз

Question

Я хочу генерировать графики динамически, когда я нажимаю на кнопку.Моя проблема заключается в том, что когда я нажимаю кнопку второй раз, первые графики блокируют отображение данных.Проблема в том, что setInterval используется в функции addChart, но я не могу понять, как исправить проблему.В моей логике есть здравый смысл или нет?

<script>
    function addChart() {
        chartCount++;
        var name = document.getElementById("chartName").value;
        chartDict[name] = chartCount;
        chart[chartCount] = new CanvasJS.Chart("chartContainer" + chartCount, {
            title: {
                text: name
            },
            axisY: {
                includeZero: false,
                maximum: 70
            },
            axisX: {
                valueFormatString: "hh:mm tt"
            },
            data: [{
                type: "line",
                dataPoints: dps[chartCount]
            }]
        });
        updateChart[chartCount] = function(count) {
            count = count || 1;

            for (var j = 0; j < count; j++) {

                dps[chartCount].push({
                    x: xVal[chartCount],
                    y: yVal[chartCount]
                });
                xVal[chartCount] = new Date()
                //console.log(xVal)
                //xVal++;
            }

            if (dps[chartCount].length > dataLength) {
                dps[chartCount].shift();
            }

            chart[chartCount].render();
        };
        intervals[chartCount] = setInterval(updateChart[chartCount], 1000)

    } 
  </script>

Answer 1

Ниже вы можете попробовать обходной путь:

Удалите внутреннее содержимое диаграммы из DOM перед переназначением новых значений для элемента диаграммы. Ниже приведена ссылка на использование метода remove () jquery:

https://api.jquery.com/remove/