Google可视化 - 未呈现的表格数据

Question

我正在努力使用谷歌可视化API。我已经定义了以下Spring控制器，它返回com.google.visualization.datasource.datatable.DataTable的json表示。

@RequestMapping(value = "/magento", method = RequestMethod.GET, headers = { "Accept=application/json" }, params = { "table" }, produces = "application/json; charset=utf-8")
    public @ResponseBody
    DataTable getMagentoCustomersTable() {
        DataTable data = new DataTable();
        ArrayList<ColumnDescription> cd = new ArrayList<ColumnDescription>();
        cd.add(new ColumnDescription("customerId", ValueType.TEXT,
                "Customer Id"));
        cd.add(new ColumnDescription("email", ValueType.TEXT, "Email"));
        cd.add(new ColumnDescription("firstName", ValueType.TEXT, "First Name"));
        cd.add(new ColumnDescription("lastName", ValueType.TEXT, "Last Name"));

        data.addColumns(cd);

        // Fill the data table.
        try {
            for (CustomerInterface customer : magentoService.getCustomers()
                    .getCustomers()) {
                data.addRowFromValues(customer.getCustomerId(),
                        customer.getEmail(), customer.getFirstName(),
                        customer.getLastName());
            }
        } catch (TypeMismatchException e) {
            System.out.println("Invalid type!");
        }

        return data;
    }

然后我使用跟随ajax调用来产生表输出

$.ajax({
            url : "${pageContext.request.contextPath}/customer/magento.json",
            data : {
                table : null
            },
            dataType : 'json'
        }).success(
                function(response) {
                    // Create the data table.
                    var data = new google.visualization.DataTable(response);

                    // Set chart options
                    var options = {
                        'title' : 'Magento Customers',
                        'width' : 400,
                        'height' : 300
                    };

                    // Instantiate and draw our table, passing in some options.
                    var table = new google.visualization.Table(document
                            .getElementById('chart_div'));

                    table.draw(data, options);
                });

Ajax调用返回带有数据的有效json对象。使用预期的行数创建表，处理js时没有错误，但所有表行都是空的以及列标题。 所以我的问题是我错过了什么？可能出了什么问题？

== EDIT == 下面你可以看到从ajax调用返回到客户端的示例json。当这个json传递给DataTable构造函数时，它被创建，但我注意到在DataTable对象中没有创建列而行是。

{
    "warnings": [],
    "rows": [{
        "customProperties": {},
        "cells": [{
            "value": {
                "value": "1",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "1"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }, {
            "value": {
                "value": "lname1@gmail.com",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "lname1@gmail.com"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }, {
            "value": {
                "value": "fname1",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "fname1"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }, {
            "value": {
                "value": "lname1",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "lname1"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }]
    }, {
        "customProperties": {},
        "cells": [{
            "value": {
                "value": "2",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "2"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }, {
            "value": {
                "value": "lname2@gmail.com",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "lname2@gmail.com"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }, {
            "value": {
                "value": "fname1",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "fname1"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }, {
            "value": {
                "value": "lname2",
                "type": "TEXT",
                "null": false,
                "objectToFormat": "lname2"
            },
            "type": "TEXT",
            "null": false,
            "customProperties": {},
            "formattedValue": null
        }]
    }],
    "numberOfRows": 2,
    "numberOfColumns": 4,
    "columnDescriptions": [{
        "id": "customerId",
        "type": "TEXT",
        "pattern": "",
        "customProperties": {},
        "label": "Customer Id"
    }, {
        "id": "email",
        "type": "TEXT",
        "pattern": "",
        "customProperties": {},
        "label": "Email"
    }, {
        "id": "firstName",
        "type": "TEXT",
        "pattern": "",
        "customProperties": {},
        "label": "First Name"
    }, {
        "id": "lastName",
        "type": "TEXT",
        "pattern": "",
        "customProperties": {},
        "label": "Last Name"
    }],
    "customProperties": {},
    "localeForUserMessages": null
}