Morris js图表加载两次

我使用Morris js绘制基本折线图。这里是我的代码：Morris js图表加载两次

function getChart(range) { 
    $.ajax({ 
     type: 'GET', 
     url: "page.php?doChart=1&range=" + range, 
     dataType: 'json' 
    }).done(function(json) { 
     Morris.Line({ 
      element: 'chart', 
      data: json.data, 
      xkey: 'month', 
      ykeys: json.xkey, 
      labels: json.label, 
      parseTime: false 
     }); 
    }); 
} 
$(document).ready(function() { 
    getChart('all'); 
    $("#timeRange").on('click', function() { 
     getChart($(this).data('value')) 
    }); 
});

上面的代码工作在页面加载就好了，问题是，当我尝试加载图表不同时期，采用上单击事件。原始容器标识#chart正在被替换，但由于某种原因，图表的相同实例正在#chart div下方创建。

来源

2016-07-22 Alko

什么是“getStats”功能吗？可能也值得分享。 – ADyson

@ADyson。对不起，我修复了错误，其单击事件后调用了相同的函数。 – Alko

为什么不只是删除旧的图表，然后插入一个新的？ – Adjit

试试这样说：

function getChart(range) { 
    $("#chart").empty(); 
    $.ajax({ 
... etc

运行Morris.Line功能时，它都会插入一个<svg>元素到你所选择的元素（在你的情况“表”）。它不覆盖前一个，它增加了一个。所以你需要先清除旧的图表。

请参阅本演示展示重复问题： http://jsbin.com/yelonizoce/1/edit?html,js,output

而这一次展示使用的.empty(); http://jsbin.com/xinegovoqo/1/edit?html,js,output

来源

2016-07-22 19:28:09 ADyson

Morris js图表加载两次

回答

相关问题