拉斐爾圖，更新和替換

Question

我有一個用拉斐爾創建的餅圖。我有一個表單複選框，單擊時我想將「效果」附加到餅圖上。這個例子試圖用inGlowFun（）附加一個內部發光，方法是在漸變之後創建一個圓。

function allPie(){  

    var pie;  

     Raphael.fn.renderPie = function(cx,cy,r,values,total) { 

      var canvas = this, 
       radian = Math.PI/180, 
       chart = this.set(); 

      function createSlice(cx, cy, r, startAngle, endAngle, params) { 
       var x1 = cx + r * Math.cos(-startAngle * radian), 
        x2 = cx + r * Math.cos(-endAngle * radian), 
        y1 = cy + r * Math.sin(-startAngle * radian), 
        y2 = cy + r * Math.sin(-endAngle * radian); 


       return canvas.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params); 
      } 




      var angle = 90, 
       process = function (j) { 

         var value = parseInt(values[j].spend, 10), 
         angleplus = 360 * value/total, 
         p = createSlice(cx, cy, r, angle - angleplus, angle, {fill: values[j].pieColour, stroke: "#FFF", "stroke-width": 1}); 

        values[j].slice = p;  

        angle -= angleplus; 
        chart.push(p);   
       }; 


      function glowFun(){ 
      canvas.circle(cx, cy, 140).attr({fill:"r#fff-#fff:96-#CCC", "stroke-width": 0}); 
      } 



      // creating each pie slice 
      for (var i = 0, ii = values.length; i < ii; i++) { 
       process(i); 
      } 
      //create inner gradient 
      function hollowFun(){ 
      canvas.circle(cx, cy, 120).attr({fill:"85-#fff-#CCC", "stroke-width": 20, "stroke": "#FFF", 'opacity': 0.000001}); 
      } 




      // inner glow (I admit this is a bit of a hack but it keeps it simple) 
      function inGlowFun(){ 
      canvas.circle(cx, cy, 55).attr({fill:"r#fff-#fff:85-#CCC", "stroke-width": 2, "stroke": "#FFF"}); 
      } 
      if(box.checked){ 
      inGlowFun(); 
      } 

      // returning the whole set of nodes for interactions later 
      return chart; 

     }; 







     // creating a namespace for this code so that anything we create won't effect other JavaScript on the page 
     var dotNet = window.dotNet || {}; 








     /* 
     a function that parses the data contained in the data table, creates the Raphaël object we're drawing too and calls our Raphaël plug-in 
      $source - reference to the data source (an HTML table in this example) 
      $container - reference to the HTML element we're creating the chart inside 
     */  
     dotNet.makePie = function($source, $container, pie) {  
      var pie; 
      /* 
      few constannt variables for this function 
       pieData - an empty array that will hold an object for each section 
       totalSpend - the grand total of all the rows (calculated via code for greater accuracy) 
      */ 
      var pieData = [], 
       totalSpend = 0; 


      /* 
      function to parse each table row, create HTML and attach events 
       i - index of the iteraction 
      */ 
      function prepare(i) { 

       /* 
       variables used for each call 
        row - jQuery object of the current table row 
        values - an empty object that will be filled with data and references associated with each row 
        head - jQuery object used to reference the th of the current row 
       */ 
       var row = $(this), 
        values = {}, 
        head = row.find('.tabh'); 

       // grabbing the numeric total for the row and assigning to values 
       values.spend = row.find('.tdh').text(); 
       // each pie slice will now be styled in a CSS file -keeping style where it should be other than in JavaScript 
       values.pieColour = row.find('th span').css('borderLeftColor'); 

       // increase total value 
       totalSpend += parseInt(values.spend, 10); 

       // push values into the array for access later 
       pieData.push(values); 

      } 

      // iterate through each table row (only in the body)  
      $source.find('.tbh tr').each(prepare); 



      // call the plugin to create the chart  
      var sizeman = 300 
      var sizepiespace = sizeman /2 
      var sizepie = sizeman/(30/13) 
      if(pie){ 
      pie.clear(); 
      } 
      pie = Raphael($container[0], sizeman, sizeman).renderPie(sizepiespace, sizepiespace, sizepie, pieData, totalSpend); 

      // attaching an event to the Raphaël set that fades all the slice back to full opacity 
      pie.mouseout(function() { 
       pie.attr('opacity', 1); 
      }); 

     }; 


// calling our makePie function on DOM ready 
     function piefunc(){ 
     $(function() { 
      dotNet.makePie($('table'),$('#pie'), pie); 
    }); 
    } 
    piefunc(); 

} 

This is the checkbox that it applies to and where the pie is actually run. 
      <form> 
      <input type="checkbox" id="checker" onclick="checkFun();" /> 
      </form> 

      <script type="text/javascript"> 



      var box = document.getElementById('checker'); 
     function checkFun(){ 
     allPie(); 

     } 

    allPie(); 
    pieShower(); 
      </script> 

當複選框被點擊它併產生與預期的效果了新的餡餅，不幸的是它也推動了以前版本的下降，並保持在同一頁上，所以你不停地檢查和取消勾選框更多並在頁面上製作更多內容。無論如何刪除或刪除已經在頁面上的圖表，同時創建一個具有所需效果的新圖表？

Answer 1

試試這個

使var pie一個全局變量，而不是當地的一個

和前var pie = Raphael($container.....

添加以下

if(pie){ 
    pie.clear(); 
} 

還，你最好使用graphaelpiechart api代替你現在的方式（INMO）

看看我jsfiddle with hover (glow like) effect + click callback