KendoUI 图表不使用 JSON 数据源答案

【问题标题】：KendoUI Chart not consuming JSON dataSourceKendoUI 图表不使用 JSON 数据源
【发布时间】：2013-03-10 02:21:55
【问题描述】：

我有一个剑道 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}]}

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

【问题讨论】：

也许在done 中调用createkpiBreakdownChart 函数会起作用？
谢谢，我还没试过，但还是不行。
1) 你的控制台有错误吗？
你使用过例如提琴手看看图表是否正在尝试加载任何东西？您应该会在页面加载后不久看到对 ../Test/GetData 的请求。如果没有，您可能设置了错误的数据源。如果是，那么错误应该在图表设置的其余部分中。
我会和提琴手核对一下，谢谢你的提示。控制台没有错误。

标签： jquery json kendo-ui data-visualization

【解决方案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"
        },
    },

【讨论】：

非常感谢您修复了它，现在数据正在正确加载。对此，我真的非常感激。（顺便说一句，请继续写博客，我发现进入 Telerik/Kendo 很有用）。再次感谢。