圖表未使用Google圖表顯示

Question

嗨，我正在使用Google圖表顯示圖表，但未顯示圖表。 我可以在firbug控制台中看到打印的json，但仍未顯示圖表。 下面是我的代碼

function drawChart() {
        $.ajax({
            url: ipaddress+'/getSpecificFields',
            dataType: "json",
            success: function (jsonData) {
                alert('success');
                if (!$.browser.msie) {
                    console.log(jsonData);

                }
                // Create our data table out of JSON data loaded from server.
                var data = new google.visualization.DataTable(jsonData);
                data.addColumn("string", "abc");
                data.addColumn("string", "cde");
                data.addColumn("string", "fgh");

                data.addRows(jsonData.length);

        var i = 0;
        $.each(jsonData, function () {

            data.setValue(i, 0, this.abc);
            data.setValue(i, 1, this.cde);
            data.setValue(i, 2, this.fgh);
            i++;
        });
                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {
                    width: 400,
                    height: 240
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus + '\n' + errorThrown);
                if (!$.browser.msie) {
                    console.log(jqXHR);
                }
            }
        });
    }}

從服務器返回的json

[Object { abc="leave, cde="80%", fgh="52b83880a36dcda423000001"}, Object { abc="Meeting", cde="60%", fgh="52b83880a36dcda423000002"}, Object { abc="Work", cde="70%", fgh="52b83880a36dcda423000003"}]

從瀏覽器，例如localhost：3000 / something

[
  {
    "abc": "Work",
   "cde": "50%",
    "ghe": "1",    
  },
  {    
    "cde": "50%",
    "abc": "Sick",
    "ghe": "2"
  },
  {
    "abc": "Some",
    "cde": "50%",
    "ghe": "3",    
  }
]

和節點js中的服務器端代碼

var jsonString = [];
var jsonParse;
test.find({abc:1,cde:1,ghe:1},function (err, list, count) {
        if (err) throw(err);
        list.forEach(function(listLoop){

            jsonParse = JSON.parse(JSON.stringify(listLoop));
            console.log("jsonParse " + JSON.stringify(listLoop)); 
            jsonString.push(jsonParse);
        });        
        res.json(jsonString);
    });

Answer 1

您的JSON似乎不正確，您應該在此處查看Google文檔：

https://developers.google.com/chart/interactive/docs/php_example

這樣的問題聽起來就像您要嘗試執行的操作：

使用CodeIgniter根據JSON數據創建Google餅圖

Answer 2

首先，您需要從DataTable構造函數中刪除jsonData ：

var data = new google.visualization.DataTable(jsonData);

應該：

var data = new google.visualization.DataTable();

其次，您的數據完全由字符串組成，PieChart無法執行任何操作。 PieCharts需要兩列數據：1個字符串用於標簽，1個數字用於值。 如果要創建數字列，請確保JSON不會在數字兩邊加上引號。

第三（我假設這只是將實際數據更改為樣本數據的錯字），您從數據數組中對象的fgh屬性中提取數據，但是對象中沒有fgh屬性。