Я пытаюсь использовать две диаграммы Морриса в двух разных вкладках Bootstrap. Первый загружается нормально, так как это вкладка, которая открывается при загрузке страницы. Тем не менее, вторая вкладка содержит график, который не заполняется. Я узнал, что могу вызвать перерисовку, изменив размер моего браузера всего на пиксель. Чтобы решить эту проблему, мне нужен скрипт для принудительного изменения размера при открытии новой вкладки. Я нашел решение здесь, на SO, но оно, похоже, не работает. Это то, что я пробовал (нашел здесь https://codeday.me/bug/20181225/460886.html (я перевел это с Google))
Для местоположения диаграммы (примечание: у меня есть два из них, каждый на каждой вкладке)
<div id="morris-area-chart-1"></div>
Код для содержания диаграммы в Javascript (также два раза)
$(function() {
var usage_graph1; ?> = Morris.Area({
element: 'morris-area-chart-1',
data: #######
xkey: 'period',
ykeys: ['mileage'],
labels: ['mileage'],
pointSize: 4,
hideHover: 'auto',
ymax: 24,
ymin: 10,
resize: true
});
});
Для перерисовки у меня есть (тоже два раза)
$('ul.nav a').on('shown.bs.tab', function (e) { usage_graph1.redraw(); });
Я нашел следующий код, который мне немного помог, он содержит функцию перерисовки для диаграмм Морриса.
$('ul.nav a').on('shown.bs.tab', function (e) {
var types = $(this).attr("data-identifier");
var typesArray = types.split(",");
$.each(typesArray, function (key, value) {
eval(value + ".redraw()");
})
});
Но я не знаю, как этот скрипт узнает, какую вкладку ему придется перерисовать. Должен ли я дать одно конкретное имя?