谷歌图表发送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

回答

相关问题