php - ajax 调用后的 Google 图表 api

Question

在 ajax 调用后，我遇到了使用 Google 图表 API 进行数据可视化的问题。

首先，我进行了 ajax 调用并获取了一个 json 对象。之后我想从 json 中提取一些数据并绘制仪表图。获取 json 并提取数据工作正常，但当我尝试加载图表时，正文被删除，我得到一个空白/白色屏幕。有谁知道我做错了什么？我还尝试对图表的值进行硬编码，而不是采用 json 值(但在加载图表之前保留 ajax 调用)，但它也不起作用。

function loadStats(){
    var http = getRequestObject();
    var city = "berlin";
    http.open("GET", "getTwitterSentiments.php?city="+city, true);
    http.onreadystatechange=function() {
        getStatistic(http)
    };
    http.send(null);
}

function getStatistic(request) {
    if ((request.readyState == 4) && (request.status == 200)) {
        var data = request.responseText;
        var JSONStats = eval("(" + data + ")");
        loadGauge(JSONStats.sentiment_index);
    }

function loadGauge(sentiment){
    google.load('visualization', '1', {packages:['gauge']});
    google.setOnLoadCallback(drawGauge);
    function drawGauge() {
        var data = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Test', sentiment]     
        ]);

        var options = {
            width: 100, 
            height: 100,
            redFrom: 0, 
            redTo: 45,
            yellowFrom: 45,
            yellowTo: 55,
            greenFrom: 55, 
            greenTo: 100,
            minorTicks: 10
        };

        var chart = new google.visualization.Gauge(document.getElementById('testgchart'));
        chart.draw(data, options);
    }
}

Answer 1

尝试使用 google.load() 函数的回调功能。

例如，对于您的代码，请尝试以下操作:

function loadGauge(sentiment){
    google.load('visualization', '1.0', {'packages':['gauge'], 'callback': drawGauge});

}

function drawGauge(){
...
chart.draw(data, options);
}

有关详细信息，请查看 Google Loader 开发人员指南 的“动态加载”部分: https://developers.google.com/loader/#Dynamic

如果我理解正确的话，多次调用 loadGauge() 将不会导致多次访问 Google 服务器来加载所需的 API，但只会调用一次。