jquery가 플러그인의 여러 인스턴스를 방지합니다

Question

http://workshop.rs/jqbargraph/ 플러그인을 사용하여 차트를 표시하고 업데이트하려고합니다. 플러그인은 페이지로드시 시작되지만 사용자가 차트에 필요한 데이터를 업데이트 할 수 있어야합니다. 그러나이 기능은 업데이트 이벤트가 시작될 때마다 여러 차트를 추가합니다. 나는 어떻게 든 차트 데이터를 업데이트하고 다시 시작하기 전에 플러그인의 원래 인스턴스를 파괴해야한다고 가정하지만이 작업을 허용하기 위해 플러그인에 통합 된 것은 없습니다.

아무도 내 코드에이 기능을 추가 할 필요가 있다고 말할 수 있습니까?

  jQuery(document).ready(function() { 

        var chartData = new Array([0]); 
        showChart(chartData);     

        jQuery('#update').live("click", function() { 
         var qtyArr = []; 

         jQuery('input[name=qty]').each(function(i) { 

           qty = Number(jQuery(this).val()); 

           if(qty > 0){ 
           qtyArr.push(qty); 
           } 

         }); 



         chartData = new Array(
          [qtyArr] 
         ); 

         showChart(chartData); 
        }); 

       }); 

       function showChart(chartData){ 

        jQuery("#chart").jqBarGraph({ 
         data: chartData, 
         width: 200, 
         height: 300 
        });    
       } 

Answer 1

전화 empty()을 당신이 플러그인을 호출하기 전에 : 첫 번째 예 그러나이 나던을 사용하여 시도

jQuery("#chart").empty().jqBarGraph({ 
    data: chartData, 
    width: 200, 
    height: 300 
}); 

Answer 2

플러그인의 데모 페이지에 차트를 삭제하고 다음과 같이 reinitialises :

$('#exampleSimple').html(''); 
$('#exampleSimple').jqbargraph({ data: arrayOfData }); 

.empty()

도 작동합니다.

당신은 아마 원하는 -

function showChart(chartData) { 
    $('#chart').empty().jqBarGraph({ 
     data: chartData, 
     width: 200, 
     height: 300 
    }); 
}