我在Bootstrap标签中使用Morris图表(每个标签都有不同时间段的图表)。
搜索此网站后,我发现为了在标签中显示图表,我应该使用以下代码:
$('ul.nav a').on('shown.bs.tab', function (e) {
new Morris.Line({......chart_data_goes_here
效果很好(当不使用代码时,图表仅显示在第一个选项卡中),但是当我反复单击选项卡(在不同图表之间切换)时,图表会以某种方式覆盖"覆盖"。在第一次单击任何选项卡后,一切正常,但从那时起,任何其他点击都会使"覆盖"越来越大。见例子:
我怎么能阻止这个?我想这是因为所有的图表都是在'show.bs.tab'上创建的。同时发生的事件,如果在'show.bs.tab'上显示只创建了一个图表,问题就会消失。事件?如果是这样,我可以指定在点击特定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>
答案 0 :(得分:0)
在shown.bs.tab
事件处理程序中,只需在加载图表之前清空div的内容,清除最后加载的图表的内容。
$('#yourChartDivID').empty();
new Morris.Line({...chart data});