javascript - gRaphael:存取多篇论文时遇到麻烦

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

最佳答案

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

关于javascript - gRaphael:存取多篇论文时遇到麻烦，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18154791/