Question

我有一个Kendo UI图表：

function createkpiBreakdownChart(labelPosition) {
    $("#kpiBreakdownChart").kendoChart({
        theme: $(document).data("kendoSkin") || "metro",
        dataSource: {
            transport: {
                read: {
                    url: '../Test/GetData',
                    dataType: "json"
                }
            }
        },
        schema: {
            data: "customerSatisfactionChart"
        },
        series: [{
            field: "KPITestColumnValue"
        }],
        categoryAxis: {
            field: "KPITestColumnName"
        },
        title: {
            text: "Customer Satisfaction"
        },
        legend: {
            position: "bottom",
            visible: false,
        },
        chartArea: {
            background: "#ffffff"
        },
        seriesDefaults: {
            type: "bar"
        },
        //series: [{
        //    name: "Performance Metrics",
        //    data: [4.552162849872774, 4.391752577319588, 4.215633423180593, 4.345108695652174, 4.4728682170542635, 4.387005649717514, 4.351351351351352]
        //},],
        valueAxis: {
            minorUnit: .25,
            majorUnit: 1,
            min: 0,
            max: 5,
            plotBands: [{
                from: 4,
                to: 5,
                color: '#000000',
                opacity: .1
            }],
            labels: {
                labels: {
                    format: "N0"
                },

            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        },
        //categoryAxis: {
        //    categories: ['Ease of requesting help', 'Time to reach qualified technician', 'Time to provide a solution', 'Completeness of solution', 'Technical ability & product knowledge', 'How well we kept you informed', 'Overall opinion of service'],
        //},
        tooltip: {
            visible: true,
            format: "#.##"
        }
    });
}

这是空白的。当我运行AJAX调用时：

$.ajax({
    type: 'GET',
    url: '../Test/GetData',
}).done(function (data) {
    var customerSatisfactionChartData = data;
}).fail(function (jqXHR, textStatus) {
})

在使用Firebug的Firefox中

我收到了这个JSON：

{"customerSatisfactionChart":[{"KPIColumnName":"Time To Reach Qualified Tech","KPIColumnValue":3.579831},{"KPIColumnName":"Completeness Of Solution","KPIColumnValue":3.359243},{"KPIColumnName":"Opinion Of Overall Service","KPIColumnValue":3.720588},{"KPIColumnName":"Tech Ability And Prod Knowledge","KPIColumnValue":3.636554},{"KPIColumnName":"Time To Provide Solution","KPIColumnValue":3.285714},{"KPIColumnName":"Ease Of Requesting Help","KPIColumnValue":3.758403},{"KPIColumnName":"How Well Are You Kept Informed","KPIColumnValue":3.262605}]}

我想弄清楚为什么剑道图表没有正确使用这个？这是在我的控制台的响应字段中，但我猜我现在没有剑道将使用的格式？如果这是问题，是否有办法通过解析或参数映射来纠正它？感谢。

Answer 1

这是不正确的：

    dataSource: {
        transport: {
            read: {
                url: '../Test/GetData',
                dataType: "json"
            }
        }
    },
    schema: {
        data: "customerSatisfactionChart"
    },

schema是DataSource的一部分，因此应该是：

    dataSource: {
        transport: {
            read: {
                url: '../Test/GetData',
                dataType: "json"
            }
        }
        schema: {
            data: "customerSatisfactionChart"
        },
    },

KendoUI Chart不消耗JSON dataSource

1 个答案: