Question

我试图在两个不同的Bootstrap选项卡中使用两个Morris Area图表。第一次加载很好，因为这是加载页面时打开的选项卡。但是，第二个选项卡包含一个未填写的图形。我知道，可以通过将浏览器大小调整为一个像素来强制重绘。要解决此问题，我需要一个脚本来在打开新选项卡时强制调整大小。我在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()");
    })
});

但是我不知道该脚本如何知道必须重画哪个标签。我必须给一个特定的名字吗？

Answer 1

您可以获得需要用以下代码刷新的引导程序的选项卡名称：

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

引导选项卡中的莫里斯面积图

1 个答案: