替代getimageuri（）谷歌圖表日曆

我有一個使用Google Charts API創建的日曆圖。我一直在尋找一種方法來打印圖表png，我一直無法找到一個好的工作答案。替代getimageuri（）谷歌圖表日曆

由於getImageURI()不是日曆圖表列出的方法，因此我無法在Google Developer上使用打印PNG圖表指南。

更新：

我能找到this tutorial這一直是有幫助的下載圖像，但問題是，正在下載的文件的文件名是圖像字節碼和this page by greenthumb提供的解決方案不起作用正常。使用從連接到greenthumb頁面的CanvasSaver GitHub下載的軟件包，單擊保存圖像按鈕時下載的文件是saveme.php文件，而不是實際的圖像。我曾嘗試將obj_close();放在echo $decoded;之前saveme.php，但這並沒有幫助解決問題。

非常感謝所有幫助。

來源

2014-10-20 shhasan

不幸的是谷歌的圖表只允許核心圖表和geocharts當前要印有getImageURI（） – juvian 2014-10-20 18:27:01

你知道任何的替代品？也許使用JS/jQuery？ – shhasan 2014-10-20 18:36:29

不知道，也許這有助於：http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/ – juvian 2014-10-20 18:41:28

這是最後一個腳本，適用於我的示例日曆Google圖表。將下載的文件命名爲「calendar.png」，並使用鏈接的html下載屬性進行設置。 JS Fiddle。我仍然在努力尋找一種方法來改變從透明到白色的圖像背景。

<html> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      function getImgData(chartContainer) { 
       var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode; 
       var svg = chartArea.innerHTML; 
       var doc = chartContainer.ownerDocument; 
       var canvas = doc.createElement('canvas'); 
       canvas.setAttribute('width', chartArea.offsetWidth); 
       canvas.setAttribute('height', chartArea.offsetHeight); 

       canvas.setAttribute(
        'style', 
        'position: absolute; ' + 
        'top: ' + (-chartArea.offsetHeight * 2) + 'px; ' + 
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;'); 
       doc.body.appendChild(canvas); 
       canvg(canvas, svg); 
       var imgData = canvas.toDataURL("image/png"); 
       canvas.parentNode.removeChild(canvas); 
       return imgData; 
      } 

      function saveAsImg(chartContainer) { 
       var imgData = getImgData(chartContainer); 
       var link = document.getElementById('linker'); 
       link.href = imgData; 
       link.download = "calendar.png"; 
      } 
     </script> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load("visualization", "1", { 
       packages: ["corechart", "treemap", "geochart", "calendar"] 
      }); 
      google.setOnLoadCallback(drawChart); 

      function drawChart() { 
       //Calendar 
       var dataTable = new google.visualization.DataTable(); 
       dataTable.addColumn({ 
        type: 'date', 
        id: 'Date' 
       }); 
       dataTable.addColumn({ 
        type: 'number', 
        id: 'Won/Loss' 
       }); 
       dataTable.addRows([ 
        [new Date(2012, 3, 13), 37032], 
        [new Date(2012, 3, 14), 38024], 
        [new Date(2012, 3, 15), 38024], 
        [new Date(2012, 3, 16), 38108], 
        [new Date(2012, 3, 17), 38229], 
        // Many rows omitted for brevity. 
        [new Date(2013, 9, 4), 38177], 
        [new Date(2013, 9, 5), 38705], 
        [new Date(2013, 9, 12), 38210], 
        [new Date(2013, 9, 13), 38029], 
        [new Date(2013, 9, 19), 38823], 
        [new Date(2013, 9, 23), 38345], 
        [new Date(2013, 9, 24), 38436], 
        [new Date(2013, 9, 30), 38447] 
       ]); 

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 

       var options = { 
        title: "Red Sox Attendance", 
        height: 350, 
       }; 

       chart.draw(dataTable, options); 
      } 
     </script> 
    </head> 

    <body> 
<a title="Background is transparent." id="linker" onclick="saveAsImg(document.getElementById('calendar_basic'));"><button>Save as PNG Image</button></a> 

     <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> 
    </body> 

</html>

來源

2014-10-21 21:15:37 shhasan

當我點擊提供的JSFiddle參考中的另存爲PNG按鈕時，生成的圖像顯示爲空白。 – Kal 2016-01-05 16:58:50

這很奇怪，我只是試了一下，我可以看到圖像很好。你在另一臺電腦上試過了嗎？ – shhasan 2016-01-06 17:38:35

剛剛實現：不適用於Firefox（43.0.4），但它在Chrome中運行。 – Kal 2016-01-07 19:44:33

替代getimageuri（）谷歌圖表日曆

回答

相關問題