莫里斯图表-覆盖在标签

Morris chart - overlays in tabs

本文关键字：标签覆盖莫里斯更新时间：2023-09-26

我在Bootstrap标签中使用Morris图表(每个标签都有不同时期的图表)。

在搜索了这个站点之后，我发现为了在选项卡中显示图表，我应该使用以下代码:

$('ul.nav a').on('shown.bs.tab', function (e) {
new Morris.Line({......chart_data_goes_here

它工作得很好(当代码不使用时，图表只显示在第一个选项卡中)，但是当我一遍又一遍地点击选项卡时(在不同的图表之间切换)，图表以某种方式"覆盖"。在第一次点击任何标签后，一切都很好，但从那时起，任何其他点击使"覆盖"越来越大。看例子:

第一次点击

第二次点击

点击多次后

我怎样才能阻止这一切?我想这是因为所有的榜单都是在show .bs上创建的。Tab '事件在同一时间，也许问题会消失，如果只有一个图表是创建在'show .bs。选项卡的事件吗?如果是这样，我怎么能在点击特定的ta后指定需要创建哪个图表呢?我使用标准制表符:

<li class=""><a href="#stats-week" data-toggle="tab">weekly</a></li>
<li class=""><a href="#stats-month" data-toggle="tab">month</a></li>

在shown.bs.tab事件处理程序中，只需在加载图表之前清空div的内容，以清除上次加载的图表的内容。

$('#yourChartDivID').empty();
new Morris.Line({...chart data});