Morris图表 - 标签

Question

我在Bootstrap标签中使用Morris图表（每个标签都有不同时间段的图表）。

搜索此网站后，我发现为了在标签中显示图表，我应该使用以下代码：

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

效果很好（当不使用代码时，图表仅显示在第一个选项卡中），但是当我反复单击选项卡（在不同图表之间切换）时，图表会以某种方式覆盖＆＃34;覆盖＆＃34;。在第一次单击任何选项卡后，一切正常，但从那时起，任何其他点击都会使＆＃34;覆盖＆＃34;越来越大。见例子：

After 1st click

After 2nd click

After more clicks

我怎么能阻止这个？我想这是因为所有的图表都是在'show.bs.tab＆＃39;上创建的。同时发生的事件，如果在'show.bs.tab＆＃39;上显示只创建了一个图表，问题就会消失。事件？如果是这样，我可以指定在点击特定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>

Answer 1

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

$('#yourChartDivID').empty();

new Morris.Line({...chart data});