谷歌圖表發送URI到ajax

我一直在使用圖表很長一段時間，並嘗試了許多不同的框架。谷歌圖表發送URI到ajax

我試着Canvas.js，Highcharts，然後我切換到谷歌圖表。並且一切運行良好，除非我無法將這些圖表轉換爲畫布或僅通過AJAX發送URI，因此在服務器端我可以將其插入到PDF中。

當我console.log「數據」我可以在我的console.log中看到「FormData {}」，但AJAX請求永遠不會發送到PHP。

這是我的腳本：

function chartTwo() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Revenues', 'EB', { 
      type: 'number', 
      role: 'annotation' 
     }, 'Whole Year', { 
      type: 'string', 
      role: 'annotation' 
     }], 
     ['2013', 998, 100, 100, 150, '150'], 
     ['2014', 450, 500, 500, 300, '300'], 
     ['2015', 691, 250, 250, 500, '500'] 
    ]); 

    var options = { 
     width: 800, 
     colors: ['##4e799f', '##a62b02', '##fd9f14'], 
     series: { 
      0: { 
       targetAxisIndex: 0, 
       type: 'bars' 
      }, 
      1: { 
       targetAxisIndex: 1, 
       type: 'line', 
       curveType: 'none', 
       pointSize: 5, 
       annotations: { 
        highContrast: false, 
        textStyle: { 
         color: '##000000', 
         fontSize: 11 
        } 
       } 
      }, 
      2: { 
       targetAxisIndex: 1, 
       type: 'line', 
       curveType: 'none', 
       pointSize: 5, 
       annotations: { 
        highContrast: false, 
        textStyle: { 
         color: '##000000', 
         fontSize: 11 
        } 
       } 
      } 
     }, 
     legend: { 
      position: 'bottom' 
     } 
    }; 

    var chart = new google.visualization.ComboChart(document.getElementById('chart_two')); 

    // Renders chart as PNG image 
    var chart_div = document.getElementById('chart_two_image'); 
    google.visualization.events.addListener(chart, 'ready', function() { 

     chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">'; 

     // create a formData object and add the image to it 
     var data = new FormData(); 
     data.append('pdfBody', chart.getImageURI()); 
     console.log(data); 

     // send the formData object to the php function via ajax 
     $.ajax({ 
      url: 'make.php?method=make', 
      data: data, 
      cache: false, 
      contentType: false, 
      dataType: "json", 
      processData: false, 
      type: 'GET', 
      success: function (results) { 
       console.log('success', results); 
      }, 
      error: function (results) { 
       console.log('error', results); 
      } 
     }); 

    }); 

    chart.draw(data, options); 

}

是否有任何其他的方式來轉換這些圖形到畫布上，然後將其發送到阿賈克斯？

來源

2017-08-03 T2Admin

圖表方法getImageURI()返回一個base64字符串
可用於創建一個PNG圖像

送過阿賈克斯，並不需要 - >FormData

只使用一個簡單對象...

 data: { 
      pdfBody: chart.getImageURI() 
     },

讓AJAX處理數據到查詢字符串的GET請求

設置processData爲true，或只是刪除屬性...

$.ajax({ 
     url: 'make.php?method=make', 
     data: { 
      pdfBody: chart.getImageURI() 
     }, 
     cache: false, 
     type: 'GET', 
     success: function (results) { 
      console.log('success', results); 
     }, 
     error: function (results) { 
      console.log('error', results); 
     } 
    });

來源

2017-08-03 12:00:59 WhiteHat

我已經嘗試過這種方法，它不工作。現在我試圖使用window.myVar創建一個全局變量，並在腳本結尾處使用數據創建AJAX調用：myVar，它給了我：「TypeError：$ .ajax不是函數」。任何想法？ – T2Admin

_ $。ajax不是一個函數_將表明jquery沒有被包含在頁面中... – WhiteHat

jQuery已被包含並加載，但ti是Slim版本，所以這就是爲什麼它給了我這個錯誤。 – T2Admin

我做了一個全局變量與window.myVar和腳本結束時，我做這個AJAX調用數據：myVar的，現在它的工作完美。感謝所有的幫助

來源

2017-08-03 12:53:10 T2Admin

谷歌圖表發送URI到ajax

回答

相關問題