динамически добавлять холст для chart.js - PullRequest
Новая
       26

динамически добавлять холст для chart.js

0 голосов
/ 06 марта 2019

Я пытаюсь отобразить динамическое количество графиков на веб-странице. Количество графиков зависит от количества «сервисов демонов». Я создаю холст для каждого. однако, когда я пытаюсь нарисовать график, отображается только последний. Все полотна записаны в документе, но не заполнены.

Вот мой JavaScript: 

var specContainer = document.getElementById("SpecificContainer");
        daemonCanvases = [];
        daemonCharts = [];
        for (var i=0;i<data.services.length;i++) {
            specContainer.innerHTML += '<div><canvas id="' + data.services[i] + '"></canvas></div>';
            var daemonCanv = document.getElementById(data.services[i]).getContext('2d');

            daemonCanvases.push(daemonCanv);

            daemonCharts.push(new Chart(daemonCanvases[i], {
                type: 'line',
                data: {
                    labels: timeSpanLabels,
                    datasets: myDataSets,
                },
                options: {
                    responsive: false,
                }
            }));
        }

И HTML: 

<body>
<div id="display">
    <div id="SpecificContainer">
    </div>
</div>
</body>

Любая помощь будет оценена. Спасибо.

1 Ответ

1 голос
/ 06 марта 2019

Мое предложение - создать узел холста программно, как показано ниже, и прикрепить. 

var canvas = document.createElement("canvas");
canvas.id = "my-id";
specContainerNode.appendChild(canvas);

// ----- more code ------ 

 setTimeout(function() {
  /* TIP: This timeout will be helpful to execute logic after a repaint.
          Thus, this block will execute only after nodes were attached */

      // ----- more code -----

 }, 0);

См. Вопросы и ответы для получения дополнительной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...