Diagramm zu pdf mit Echarts und jspdf

Ich habe ein Diagramm mit Echarts erstellt und möchte es mit jspdf in ein PDF einbinden. I found eine Möglichkeit wäre, Canvas zu verwenden, den Graphen in ein Bild zu übertragen und schließlich das Bild in die PDF-Datei aufzunehmen. Allerdings kann ich die Grafik nicht in ein Bild übertragen. Hier kommt der Code:Diagramm zu pdf mit Echarts und jspdf

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <title>Balken</title> 
    <script src="echarts.js"></script> 
<link rel="stylesheet" href="style.css"> 

    </head> 
    <body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script> 
    <div id="body"> 
     <div id="chart"></div> 
    </div> 

     <!-- prepare a DOM container with width and height --> 
    <div id="main" style="width: 750px;height:500px;"></div> 
    <script type="text/javascript"> 
     // based on prepared DOM, initialize echarts instance 
     var myChart = echarts.init(document.getElementById('main')); 

     // specify chart configuration item and data 
     var 

option = { 
    color: ['#3398DB'], 
    tooltip : { 
     trigger: 'axis', 
     axisPointer : {    
      type : 'shadow'   
     } 
    }, 
    grid: { 
     left: '3%', 
     right: '4%', 
     bottom: '3%', 
     containLabel: true 
    }, 
    xAxis : [ 
     { 
      type : 'category', 
      data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 
      axisTick: { 
       alignWithLabel: true 
      } 
     } 
    ], 
    yAxis : [ 
     { 
      type : 'value' 
     } 
    ], 
    series : [ 
     { 
      name:'Salami', 
      type:'bar', 
      barWidth: '60%', 
      data:[10, 52, 200, 334, 390, 330, 220] 
     } 
    ] 
}; 
     // use configuration item and data specified to show chart 
     myChart.setOption(option); 

     var canvas = document.getElementById("main"); 
var dataURL = canvas.toDataURL(); 

//console.log(dataURL); 

$("#exportButton").click(function(){ 
    var pdf = new jsPDF(); 
    pdf.addImage(dataURL, 'JPEG', 0, 0); 
    pdf.save("download.pdf"); 
}); 


    </script> 
<button id="exportButton" type="button">Export as PDF</button> 

    </body> 
</html>

Irgendwelche Vorschläge?

Quelle

2017-05-09 Martin

Haben Sie eine Lösung, um ein Diagramm als PDF zu exportieren? –

würde ich die Toolbox verwenden, als Bild speichern:

 

     ..... 
     toolbox: { 
      feature: { 
       saveAsImage : {show: true} 
      } 
     } 
    .....

Diese Option unter allen bestehenden, werden Sie ein Symbol für die Grafik als Bild zu speichern.

Quedaria así: enter image description here

Weitere Optionen mit Toolbox: http://echarts.baidu.com/echarts2/doc/option-en.html#title~toolbox

Ich hoffe, dass es Ihnen hilft.

Quelle

2017-05-10 10:07:40

Vielen Dank, ich habe das getan und das PNG ist genau das, wonach ich suche, aber wie bekomme ich die PNG/image-URL, damit ich sie automatisch in die PDF einbinden kann (neben anderen Elementen) anstatt eine Toolbox zu bekommen um das Bild herunterzuladen? – Martin

Ich brauchte das auch für ein kommerzielles Produkt, also gab ich nicht auf, bis ich die Lösung gefunden hatte.

Sie können die ID des Diagramms nicht verwenden, um die URL für das Bild abzurufen, stattdessen müssen Sie nach dem Zeichenbereich suchen.

($('canvas')[0]).toDataURL("image/png");

Beachten Sie die „[0]“ bedeutet, dass es Ihnen die erste Leinwand geben, wenn Sie mehr Diagramme haben gerade tun:

($('canvas')[0]).toDataURL("image/png"); 
($('canvas')[1]).toDataURL("image/png"); 
($('canvas')[2]).toDataURL("image/png");

3 Stunden des Suchens und Tests gut angelegte :)

Genießen Sie!

Quelle

2017-09-15 16:14:49

Diagramm zu pdf mit Echarts und jspdf

Antwort

Verwandte Themen