Morris Area chart in Bootstrap Tab

问题

I'm trying to use two Morris Area charts in two different Bootstrap tabs. The first loads fine, as this is the tab that is open when the page is loaded. However, the second tab contains a graph that is not filled in. I came to know that I could force a redraw by resizing my browser size for just a pixel. To fix this issue, I need a script to force a resize upon opening a new tab. I found a solution here on SO, but it doesn't seem to work. This is what I have tried (found here https://codeday.me/bug/20181225/460886.html (I translated it with Google))

For the location of the chart (note: I have two of those, each on every tab)

<div id="morris-area-chart-1"></div>

Code for the content of the chart in Javascript (also two times)

$(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
    });
});

For the redrew I have (also two times)

$('ul.nav a').on('shown.bs.tab', function (e) { usage_graph1.redraw(); });

I found the following code to help me out a bit, it contains a redraw function for Morris charts.

$('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()");
    })
});

But I don't know how this script will know which tab it will have to redraw. Do I have to give one a specific name?

回答1:

you can get the bootstrap's tab name that needs to be refreshed with this piece of code:

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

来源：https://stackoverflow.com/questions/54172274/morris-area-chart-in-bootstrap-tab

标签

javascript

twitter-bootstrap-3

morris.js