Диаграмма области Морриса во вкладке Bootstrap - PullRequest
Новая
       8

Диаграмма области Морриса во вкладке Bootstrap

0 голосов
/ 13 января 2019

Я пытаюсь использовать две диаграммы Морриса в двух разных вкладках 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()");
    })
});

Но я не знаю, как этот скрипт узнает, какую вкладку ему придется перерисовать. Должен ли я дать одно конкретное имя?

1 Ответ

0 голосов
/ 20 января 2019

вы можете получить имя вкладки загрузчика, которое необходимо обновить с помощью этого фрагмента кода: 

var my_tab = $('ul>li.active>a[data-toggle="tab"]').attr('href').substr(1)
...