Сохранение диаграммы флота как PDF

Question

Я пытаюсь сэкономить весь флот (Pie/Bar) Chart to PDF. Я использую jQuery/FLOT для рисования диаграммы пирога и диаграммы.

У меня есть код для загрузки флота в формате PDF, но у меня есть три диаграммы на одной странице, и проблема заключается в том, что я нажимаю загрузку, которую они печатают на странице, и в то же время я получил их в другом PDF отдельно. Мой вопрос: возможно ли, чтобы все они были в одном PDF-формате и не распечатывали их на странице.

Любая идея?

спасибо.

Вот мой код:

<div id="container" style="width:330px;height:330px"></div> 

    <a id="toPdf">Download as PDF </a> 

    var _canvas = null; 

    $(function() { 
    $.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 9]] } ], { yaxis: { max: 1 } }); 
    $("#toPdf").on("click", function(e) { 
    e.preventDefault(); 

     html2canvas($("#container").get(0), { 
      onrendered: function(canvas) { 
       document.body.appendChild(canvas); 

       var imgData = canvas.toDataURL('image/png'); 
       console.log('Report Image URL: '+imgData); 
       var doc = new jsPDF('landscape'); 

       doc.addImage(imgData, 'PNG', 10, 10, 190, 95); 
       doc.save('testingPDF.pdf'); 
      } 
     }); 
     }); 
     }); 

Answer 1

Вы пробовали извлекать холст, как только работа сделана?

$(function() { 
    $.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 9]] } ], { yaxis: { max: 1 } }); 
    $("#toPdf").on("click", function(e) { 
    e.preventDefault(); 

     html2canvas($("#container").get(0), { 
      onrendered: function(canvas) { 
       document.body.appendChild(canvas); 

       var imgData = canvas.toDataURL('image/png'); 
       console.log('Report Image URL: '+imgData); 
       var doc = new jsPDF('landscape'); 

       doc.addImage(imgData, 'PNG', 10, 10, 190, 95); 
       doc.save('testingPDF.pdf'); 
       document.body.removeChild(canvas); // newly added line 
      } 
     }); 
    }); 
}); 

UPDATE

Заканчивать этот новый fiddle (вы хотите что-то ссылку это верно?)

HTML

<div class="container1" style="width:330px;height:330px"></div> 
<div class="container2" style="width:330px;height:330px"></div> 
<div class="container3" style="width:330px;height:330px"></div> 
<a id="toPdf">Generate to pdf </a> 

КОД

var _canvas = null; 

$(function() { 
    $.plot($(".container1"), [{ 
     label: 'Testing1', 
     data: [ 
      [0, 0], 
      [1, 9] 
     ] 
    }], { 
     yaxis: { 
      max: 1 
     } 
    }); 
    $.plot($(".container2"), [{ 
     label: 'Testing2', 
     data: [ 
      [0, 0], 
      [1, 9] 
     ] 
    }], { 
     yaxis: { 
      max: 1 
     } 
    }); 
    $.plot($(".container3"), [{ 
     label: 'Testing3', 
     data: [ 
      [0, 0], 
      [1, 9] 
     ] 
    }], { 
     yaxis: { 
      max: 1 
     } 
    }); 

    window.allcanvas = []; 

    $("#toPdf").on("click", function (e) { 
     e.preventDefault(); 
     var allcontainers = $('[class^="container"]'); 
     allcontainers.each(function (index, elem) { 
      html2canvas($(elem).get(0), { 
       onrendered: function (canvas) { 
        window.allcanvas.push(canvas); 
        if(allcontainers.length == allcanvas.length){ 
         finalpdf(); 
        } 
       } 
      }); 
     }); 
    }); 
    finalpdf = function(){ 
     var doc = new jsPDF('landscape'); 
     for(var i = 0; i<allcanvas.length;i++){ 
      var imgData = allcanvas[i].toDataURL('image/jpeg'); 
      doc.addImage(imgData, 'JPEG', 10, 10, 190, 95); 
      if(i != allcanvas.length-1) 
       doc.addPage(); 
     } 
     doc.save('testingPDF.pdf'); 
    }; 
});