Как вывести нескольких графиков в созданные элементы?

Question

[adam_carraway]

Мне приходит json с данными, например:

array=array(
[DATA]=>array(
[I]=array(...числа),
[II]=array(...числа),
[III]=array(...числа)
)
)

Для каждого I,II,III я рисую график. Сначала я через js добавляю новый canvas с id='I'(к примеру), потом заношу туда график. Проблема в том, что рисуется только последний график. Почему? Как решить данную проблему?

function show_graphic(k,time,data) {

    var main= document.getElementById("all_graphics");
    var str = '<canvas id="myChart'+k+'" width="3000" height="400"></canvas>';
    main.innerHTML += str;

    new Chart(document.getElementById("myChart"+k).getContext('2d'), {
        type: 'line',
        data: {
            labels: objToarr(time), //Подписи оси x
            datasets: [
                {
                    label: [k], //Метка
                    data: objToarr(data), //Данные
                    borderColor: 'blue', //Цвет
                    borderWidth: 1, //Толщина линии
                    fill: false, //Не заполнять под графиком
                    radius: 0,
                }
                //Можно добавить другие графики
            ]
        },
        options: {
            responsive: false, //Вписывать в размер canvas
            scales: {
                xAxes: [{
                    display: false
                }],
                yAxes: [{
                    display: false
                }]
            }
        }
    });
}




function f_graph_all(user) {
    $.ajax({
        url: "http://new.project/getData_all",
        type: "POST",
        data: {"user":user},
        success: function (response) {
            var data = JSON.parse(response);

            console.log();
            for(var k in data.DATA) {
                show_graphic(k,data.TIME,data.DATA[k])
            }

        }
    });
}

Answer 1

[0xD34F]

Проблема в том, что рисуется только последний график. Почему?

Потому что

main.innerHTML += str;

После каждого += дочерние элементы main создаются заново. Соответственно, уже созданные графики удаляются.

Создавайте сразу всю разметку.

Или

main.insertAdjacentHTML('beforeend', str);

Или

const canvas = document.createElement('canvas');
main.appendChild(canvas);