如何将AJAX请求获取的JSON数据绑定到WebDataRocks透视表的DataSource

你代码的核心问题是$.ajax默认是异步执行的，getData()函数本身没有返回任何值：你在success回调里写的return只会把值返回给success回调函数本身，不会传递到外层getData()的返回结果里。所以初始化WebDataRocks的时候，dataSource.data拿到的是undefined，自然无法完成数据绑定。

这里提供两种常用的修复方式，按需选择即可：

方案1：先请求数据，再初始化透视表 #

等AJAX请求拿到数据后，再初始化WebDataRocks实例，逻辑最直观：

// 先发起数据请求
$.ajax({
    type: "GET",
    url: "NACGSample.aspx/GetPivotReportList",
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    success: function (msg) {
        // 拿到数据后初始化透视表
        var pivotData = JSON.parse(msg.d);
        // 如果msg.d本身已经是JSON对象，直接用var pivotData = msg.d即可
        initPivot(pivotData);
    },
    error: function (msg) { 
        alert(msg); 
    }
});

// 单独封装透视表初始化方法
function initPivot(data) {
    var pivot = new WebDataRocks({
        container: "#wdr-component",
        toolbar: true,
        height: 395,
        report: {
            dataSource: {
                dataSourceType: "json",
                data: data
            },
            "slice": {
                "rows": [
                    {
                        "uniqueName": "RLI_RAV_GRP_DES"
                    }
                ],
                "columns": [
                    {
                        "uniqueName": "LEVEL1"
                    },
                    {
                        "uniqueName": "LEVEL2"
                    }
                ],
                "measures": [
                    {
                        "uniqueName": "Q1",
                        "aggregation": "sum"
                    },
                    {
                        "uniqueName": "Q2",
                        "aggregation": "sum"
                    },
                    {
                        "uniqueName": "Q3",
                        "aggregation": "sum"
                    },
                    {
                        "uniqueName": "Q4",
                        "aggregation": "sum"
                    }
                ]
            },
            options:
            {
                grid: {
                    title: "Sales Report"
                }
            }
        }
    });
}

方案2：先初始化透视表，拿到数据后更新数据源 #

适合需要提前展示表格骨架、减少页面空白等待的场景：

// 先初始化空的透视表
var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    height: 395,
    report: {
        dataSource: {
            dataSourceType: "json",
            data: [] // 先给空数组
        },
        "slice": {
            "rows": [
                {
                    "uniqueName": "RLI_RAV_GRP_DES"
                }
            ],
            "columns": [
                {
                    "uniqueName": "LEVEL1"
                },
                {
                    "uniqueName": "LEVEL2"
                }
            ],
            "measures": [
                {
                    "uniqueName": "Q1",
                    "aggregation": "sum"
                },
                {
                    "uniqueName": "Q2",
                    "aggregation": "sum"
                },
                {
                    "uniqueName": "Q3",
                    "aggregation": "sum"
                },
                {
                    "uniqueName": "Q4",
                    "aggregation": "sum"
                }
            ]
        },
        options:
        {
            grid: {
                title: "Sales Report"
            }
        }
    }
});

// 发起数据请求
$.ajax({
    type: "GET",
    url: "NACGSample.aspx/GetPivotReportList",
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    success: function (msg) {
        var pivotData = JSON.parse(msg.d);
        // 调用updateData方法更新数据源
        pivot.updateData({
            data: pivotData
        });
    },
    error: function (msg) { 
        alert(msg); 
    }
});

• 确认后端返回的msg.d格式：如果返回的已经是解析好的JSON数组，不需要再加JSON.parse，重复解析会抛出异常
• 确认返回的JSON字段名和slice中配置的uniqueName完全一致，大小写敏感，字段不匹配也会导致表格无数据展示

内容的提问来源于stack exchange，提问作者MAHESH AITHAMARAJU