ChartJ не рендерится
Итак, я пытаюсь визуализировать диаграмму внутри всплывающего окна начальной загрузки, но, похоже, она не отображается. Я перепробовал все возможные способы отладки, но не могу понять, что не так. Поэтому любая помощь будет принята с благодарностью. Ниже мой html-код:
<div id = "popover-content" style = "display: none;">
{%include 'scroll_card.html'%}
</div>
Примечание. Я использую jinja для рендеринга своего HTML-кода, содержащего график, который я хотел бы отобразить во всплывающем окне. Ниже показано, что находится в файле Scroll_card.html.
<div class='summary'><h5 class='header'> Chart </h5>
<div class = "chart" style = "height: 400px;">
<canvas id='hourly-chart' width = "300" height = "400">Hello</canvas></div>
</div>
И мой js-код:
document.addEventListener('DOMContentLoaded', function() {
const myPopoverTrigger = document.getElementById('popover');
let hourChart =null;
const instance = new mdb.Popover(myPopoverTrigger, {
title:"Hourly Forecast",
sanitize:false,
html:true,
content: function(){
popContent = document.querySelector('#popover-content').innerHTML;
return popContent;
}
});
myPopoverTrigger.addEventListener('show.mdb.popover', () => {
const ctxHour = document.getElementById('hourly-chart').getContext('2d');
console.info(ctxHour);
if (hourChart) {
hourChart.destroy();
}
hourChart = new Chart(ctxHour, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
console.info(hourChart);
});
myPopoverTrigger.addEventListener('hide.mdb.popover', () => {
if (hourChart) {
hourChart.destroy();
}
});
});
Еще одно примечание: когда я использую свой console.info для диаграммы (hourChart), он возвращает объект диаграммы в консоли, который дает некоторые странные атрибуты, например, в параметрах он возвращает x и y как неопределенные. Может я что-то делаю не так или что-то упускаю?
Спасибо
Редактировать:
Итак, вот моя консоль, когда я делаю console.info(hourChart).
Сначала их не было, затем я провел небольшое исследование и увидел кое-что о том, как сделать ответ ложным, что затем решило проблему, а затем я начал видеть значения ширины и высоты как те, которые я указал, но затем ни одна диаграмма не отображалась.
Вы можете использовать responsive: true, который позволяет вам установить ширину и высоту CSS содержащего div и не устанавливать ни одно из свойств холста см. документацию. Проблема в том, как я сказал в сообщении ниже, что вы продублировали id, поэтому document.getElementById('hourly-chart') извлекли исходный скрытый холст из popover-content, а не вновь созданный для всплывающего окна. Вы должны найти способ избежать этого.
Неспособность получить контекст обычно означает, что холста не существует. Запишите, что именно возвращает getElementsByClassName, и посмотрите, есть ли два элемента. В любом случае решение класса — одно из многих возможных решений, возможно, не самое лучшее. Другой вариант, например, — изменить идентификатор холста в HTML-коде, который вводится во всплывающее окно, как в этом примере. Вы также можете удалить HTML-код из div popover-content при его вводе во всплывающее окно, а затем установить его обратно, когда всплывающее окно закроется.
Все еще не сработало, но теперь я вижу кое-что интересное: если вы посмотрите на мой обновленный вопрос, вы увидите изображение вывода моей консоли для диаграммы. Мы видим, что он отображает его, но не отображает полностью. Например, если вы посмотрите на опцию легенды в консоли, вы увидите, что x не определен, а y также не определен, основная надпись не определена, всплывающая подсказка также не определена.
Нет, это не проблема, у большинства легенд нет наборов x и y, это дополнительные/альтернативные свойства позиционирования, важны left, right, top, width и т. д., и они, вероятно, установлены. Мне это кажется диаграммой ОК, я не знаю, почему ее не видно. Можете ли вы изучить родительскую цепочку canvas, чтобы увидеть, является ли это холстом внутри всплывающего окна?
@kikon это работает!!!! Я только сейчас понял, что, возможно, программирование не для меня 😂. На самом деле я переписал все заново, и теперь это работает. Так что, возможно, я что-то упустил из виду. Не могли бы вы опубликовать свой ответ с собственным идентификатором, чтобы я мог принять его как ответ, потому что я его использую. Решение классов также работает. Большое спасибо :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
HTML-содержимое должно быть указано непосредственно в опции. В противном случае он не будет добавлен в DOM вовремя для отображения холста/диаграммы.
const instance = new mdb.Popover(myPopoverTrigger, {
title: "Hourly Forecast",
sanitize: false,
html: true,
content: `<div id = "popover-content">
<div class='summary'>
<h5 class='header'> Chart </h5>
<div class = "chart" style = "height: 400px; width: 600px;">
<canvas id='hourly-chart' width = "600" height = "400"></canvas>
</div>
</div>
</div>`
});
Демо: https://codeply.com/p/uxPMnF28ET
Дело в том, что у меня есть много HTML-кода в этом файле Scroll_card.html, а также там есть немного джинджи для анализа некоторых данных, так что есть ли другой способ сделать это, чтобы мне не пришлось добавить весь HTML-код в контент, может быть, как ожидание загрузки всплывающего окна перед загрузкой диаграмм?
Ваше решение правильное, но объяснение состоит в том, что подход OP дублирует элементы с одним и тем же идентификатором, поэтому холст, полученный document.getElementById('hourly-chart'), является не новым, а скрытым. Вот ветвь , которая использует классы для идентификации холста(ов) и фильтрует по offsetParent, чтобы получить видимый, и работает с html, полученным, как это сделал OP, в функции content.
@kikon Я взглянул на ваш код, и то, что я увидел, имело для меня смысл, но у меня все еще не работает локально. В консоли говорится, что диаграмма не может получить контекст, что, вероятно, связано с переключением на используя классы вместо Id, но это работает в коде. это меня сбивает с толку
С помощью Inspect/Elements видите ли вы элемент холста, и если видите, в порядке ли его вычисленные размеры (достаточно велики, чтобы их можно было увидеть)?