Morris js chartが2回読み込まれる

Question

私は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')) 
    }); 
}); 

上記のコードは、ページのロード時に正常に動作します私はクリックイベントに使用して、異なる期間のチャートをロードしようとすると、問題があります。元のコンテナid #chartは置き換えられますが、何らかの理由で#chart divのすぐ下に同じチャートインスタンスが作成されています。

Answer 1

はこのようにそれを試してみてください。

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