gRaphael:访问多篇论文时出现问题

gRaphael: trouble accessing multiples papers

本文关键字：文时出 问题 访问 gRaphael      更新时间：2023-09-26

我有一个页面，其中有两个使用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>

我遇到的问题是我从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();  
      }
相关文章：