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

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

Вот мой 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>

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

javascript canvas chart.js

05.03.2019 23:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 006

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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);

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

рекомендуется, чтобы тайм-аут был больше 0, и рекомендуется, чтобы он был больше, чем такт часов js. Обычно я использую 100ms, но 10ms должно быть достаточно.

— 06.03.2019 00:25

05.03.2019 23:49