gRaphael:访问倍数文件时遇到的问题

Question

我有一个页面，其中有两个使用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中提取画布的方式造成的。正如我所理解的，多幅画布存储在一个数组中，它们不会单独从文档中返回(这在事后看来是有意义的)。因此，考虑到我的实现，我需要知道想要转换为.png的画布的索引。这是在SVGtoPNG函数中。更具体地讲，关于行document.body.getElementsByTagName("svg")1; var svgElement =0是我的第一个画布，第二个画布，等等。

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