javascript - gRaphael:无法访问多篇论文

Question

我有一个页面，其中有 2 个使用 gRaphael 生成的饼图。我还使用几个插件从这些论文中创建一个 .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 中提取 Canvas 的方式造成的。正如我发现的那样，多个 Canvas 存储在一个数组中，它们不会单独从文档中返回(事后看来这是有道理的)。因此，根据我的实现，我需要知道要转换为 .png 的 Canvas 的索引。这是在 SVGtoPNG 函数中。更具体地说，关于行 var svgElement = document.body.getElementsByTagName("svg")[1]; 0 是我的第一个 Canvas ，1 是第二个 Canvas ，等等。

 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();  
      }