Google ChartsがAjaxにURIを送信する

Question

私はかなりの時間チャートで作業していて、さまざまなフレームワークを試しました。

私はCanvas.js、Highchartsを試した後、私はGoogle Chartsに切り替えました。私はこれらのチャートを何とかキャンバスに変換したり、AJAX経由でURIを送信することができないので、サーバ側でPDFを挿入することができない限り、すべてうまくいっています。

私はconsole.logの "data"を見ると、私の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); 

} 

は、キャンバスにそれらのグラフを変換し、AJAXに送信する他の方法はありますか？

Answer 1

AJAXを介して送信するPNG画像

を作成するために使用することができるbase64文字列
を返しgetImageURI()グラフ法は、本当に必要としない - >FormData

だけの単純なオブジェクトを使用します...

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

のlet Ajaxのプロセスget要求

ためのクエリ文字列にデータ

がtrueにprocessDataを設定するか、単にプロパティを削除...

$.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); 
     } 
    }); 

Answer 2

私はwindow.myVarでグローバルなVARを作り、スクリプトの最後に、私は、データと、このAJAX呼び出しますmyVarに、今、それが働いているの完全に。すべての助けをありがとう