Question

您好我使用谷歌图表来显示图表，但它没有显示图表。我可以看到json打印在firbug控制台中，但仍然没有显示图表。以下是我的代码

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

这个问题听起来就像你要做的那样：

Creating Google Pie Chart based on JSON data using CodeIgniter

Answer 2

首先，您需要从DataTable构造函数中删除jsonData：

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

应该是：

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

其次，您的数据完全由字符串组成，PieChart无法执行任何操作。 PieCharts需要两列数据：标签为1个字符串，值为1个数字。如果要创建数字列，请确保您的JSON不会在数字周围加上引号。

第三（我假设这只是从将实际数据更改为样本数据的错字），您从数据数组中对象的fgh属性中提取数据，但是您没有对象中的fgh属性。

图表未使用谷歌图表显示

2 个答案: