gRaphael : 여러 페이지에 액세스하는 데 문제가 있습니다.

Question

gRaphael을 사용하여 생성 된 2 개의 파이 그래프가있는 페이지가 있습니다. 또한 몇 가지 플러그인을 사용하여 해당 문서에서 .png 파일을 만듭니다. 제 문제는 정확한 참조를 사용하더라도 첫 번째 종이를 항상 사용한다는 것입니다 (즉, 이미지가 항상 두 번째로해도 첫 번째 그래프가됩니다).

//make sure this element exists before creating pie chart 
     if(document.getElementById("hour_pie")) 
     { 
      //extract labels into gRaphael appropriate format 
      totalArry=new Array(); 
      for(var key in hours_total) 
      { 
       totalArry.push(hours_total[key]); 
      } 

      //create canvas 
      var hourPaper = Raphael("hour_pie"); 
      //create pie chart 
      var hourPie=hourPaper.piechart(
       hourPaper.width/2, // pie center x coordinate 
       hourPaper.height/2, // pie center y coordinate 
       200, // pie radius 
       totalArry, // values 
       { 
        legend: hours_pie_labels 
       } 
      ); 


       // hover animation 
       hourPie.hover(function() { 
        this.sector.stop(); 
        this.sector.scale(1.1, 1.1, this.cx, this.cy); 

        if (this.label) { 
         this.label[0].stop(); 
         this.label[0].attr({ r: 7.5 }); 
         this.label[1].attr({ "font-weight": 800 }); 
        } 
       }, function() { 
        this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); 

        if (this.label) { 
         this.label[0].animate({ r: 5 }, 500, "bounce"); 
         this.label[1].attr({ "font-weight": 400 }); 
        } 
       }); 
      //on click of this img, convert canvas to .png and prompt download  
      $('.hour_download').click(function() 
      { 
       // turn svg into PNG 
       SVGtoPNG(hourPaper.toSVG(), "hourPieGraph"); 
      }); 
     } 
     if(document.getElementById("explosive_pie")) 
     { 

      //extract labels into gRaphael appropriate format 
      totalArry=new Array(); 
      for(var key in explosive_totals) 
      { 
       totalArry.push(explosive_totals[key]); 
      } 
      //create canvas 
      var explosivePaper = Raphael("explosive_pie"); 
      //create pie chart 
      var explosivePie=explosivePaper.piechart(
       explosivePaper.width/2, // pie center x coordinate 
       explosivePaper.height/2, // pie center y coordinate 
       200, // pie radius 
       totalArry, // values 
       { 
        legend: explosive_pie_labels 
       } 
      ); 


       // hover animation 
       explosivePie.hover(function() { 
        this.sector.stop(); 
        this.sector.scale(1.1, 1.1, this.cx, this.cy); 

        if (this.label) { 
         this.label[0].stop(); 
         this.label[0].attr({ r: 7.5 }); 
         this.label[1].attr({ "font-weight": 800 }); 
        } 
       }, function() { 
        this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); 

        if (this.label) { 
         this.label[0].animate({ r: 5 }, 500, "bounce"); 
         this.label[1].attr({ "font-weight": 400 }); 
        } 
       }); 

      //on click of this img, convert canvas to .png and prompt download 
      $('.explosive_download').click(function() 
      { 
       // turn svg into PNG 
       SVGtoPNG(explosivePaper.toSVG(), "explosivePieGraph"); 
      }); 
     } 

과 HTML : 내가 가졌다

<div id="hour_pie" class="pie_chart"></div><img class="download_image hour_download" title="Download this graph" src="/images/download_small.png"></img> 

<div id="explosive_pie" class="pie_chart" ></div><img class="download_image explosive_download" title="Download this graph" src="/images/download_small.png"></img> 
    <style type="text/css"> 
    .pie_chart 
    { 
     width:1000px; 
     height:450px; 
    } 
    .download_image 
    { 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
    } 


</style> 

Answer 1

문제는 내가 XML에서 캔버스를 추출하는 방식의 결과였다 다음은 내 코드입니다. 내가 알아 냈으므로 배수 캔버스는 배열에 저장되며 문서에서 개별적으로 반환되지 않습니다 (뒤늦게 볼 때 의미가 있습니다). 따라서 필자의 구현에서 .png로 변환하려는 캔버스의 인덱스를 알아야합니다. 이것은 SVGtoPNG 함수에 있습니다. 더 구체적으로 줄에 대해서 var svgElement = document.body.getElementsByTagName ("svg") [1]; 0은 첫 번째 캔버스, 두 번째 캔버스는 1 등입니다.

function SVGtoPNG(xml, name) { 

    try 
    { 
     //add canvas into body  
     var canvas = document.createElement('canvas'); 
     canvas.id = "myCanvas"; 
     document.body.appendChild(canvas); 

     //default is 'xml' (used for IE8) 
     var finalSvg=xml; 

     // IE8 is special and a pain in the ass 
     if(BrowserDetect.browser==="Explorer" && BrowserDetect.version===8) 
     { 
     FlashCanvas.initElement(canvas); 
     } 
     else 
     { 
     //serialize svg 
     var svgElement = document.body.getElementsByTagName("svg")[1]; 
     var svgXml = (new XMLSerializer()).serializeToString(svgElement); 
     finalSvg = svgXml.FixForRaphael(); 
     }