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圖表加載兩次

回答

相關問題