javascript - Google Charts 将 URI 发送到 ajax

Question

我使用图表已经有一段时间了，并尝试了很多不同的框架。

我尝试了 Canvas.js、Highcharts，然后切换到 Google Charts。一切都运行良好，除了我无法将这些图表以某种方式转换为 Canvas 或只是通过 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);

}

有没有其他方法可以将这些图形转换为 Canvas ，然后将其发送到 ajax？

Answer 1

图表方法 getImageURI() 返回一个 base64 字符串
可用于创建 png 图像

通过ajax发送，真的不需要--> FormData

只需使用一个简单的对象...

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

让ajax把数据处理成get请求的query string

将 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);
        }
    });