Bootstrap 选项卡中的莫里斯面积图 [英] Morris Area chart in Bootstrap Tab

问题描述

我正在尝试在两个不同的 Bootstrap 选项卡中使用两个莫里斯面积图.第一个加载正常，因为这是加载页面时打开的选项卡.但是，第二个选项卡包含一个未填充的图形.我开始知道我可以通过将浏览器大小调整为一个像素来强制重绘.为了解决这个问题，我需要一个脚本来在打开新标签时强制调整大小.我在 SO 上找到了一个解决方案，但它似乎不起作用.这是我尝试过的(在这里找到 https://codeday.me/bug/20181225/460886.html(我用谷歌翻译的)

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>

用Javascript编写图表内容的代码(也是两次)

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?

推荐答案

可以通过这段代码获取需要刷新的bootstrap的tab名称:

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)

这篇关于Bootstrap 选项卡中的莫里斯面积图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！