chart to pdf echartsとjspdfを使用

私はechartsでグラフを作成し、jspdfを使ってpdfにそれを含めたいと思います。 I foundこれを行う方法の1つは、キャンバスを使用し、グラフを画像に転送し、最後に画像をpdfに含めることです。しかし、私はグラフを画像に転送することができません。ここにコードが来る：chart to pdf echartsと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>

何か提案がありますか？

出典

2017-05-09 Martin

グラフをPDF形式でエクスポートするソリューションはありますか？ –

私は、ツールボックスを使用し、画像として保存します：

 

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

このオプションは、すべての既存のものの中で、あなたのイメージとしてグラフィックを保存するためのアイコンが表示されます。

QuedariaのASI：ツールボックスでより多くのオプションについては enter image description here

：http://echarts.baidu.com/echarts2/doc/option-en.html#title~toolbox

私はそれはあなたを助け願っています。

出典

2017-05-10 10:07:40

多くのおかげで、私はこれを行い、PNGはまさに私が探しているものですが、PNG/image-URLを取得して、ツールボックスを取得する代わりにpdf（他の要素の隣に）に自動的に含めることができます画像をダウンロードするには？ – Martin

私はこれも商用製品に必要でしたので、解決策が見つかるまで私はあきらめませんでした。

グラフのIDを使用して画像のURLを取得することはできません。キャンバスを検索する必要はありません。

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

あなたはより多くのチャートはただやるした場合の通知は、「[0]」、それはあなたの最初のキャンバスを与える意味：よく使わ検索とテストの

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

3時間:)

を

お楽しみください！

出典

2017-09-15 16:14:49

chart to pdf echartsとjspdfを使用

答えて

関連する問題