Morris图表 - 标签

时间:2015-05-18 16:49:28

标签: javascript jquery twitter-bootstrap charts morris.js

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

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

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

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

After 1st click

After 2nd click

After more clicks

我怎么能阻止这个?我想这是因为所有的图表都是在'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>

1 个答案:

答案 0 :(得分:0)

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

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

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