Question

我是kendoui应用程序的新手，我已经创建了一个饼图应用程序（对于这个我休闲的kendoui Demo示例。）当我运行kendo示例（远程json数据）时，它工作正常但是当我用我的url运行应用程序时它给出了如下错误。

enter image description here

但是当我使用硬编码json数据运行应用程序时，它运行正常。这是json（从我的url返回）

         [
               { "Amount": 239.9700, "RangeValue": "####below" },
               { "Amount": 4000.0000, "RangeValue": "#1_$_30#Days" },
               { "Amount": 5000.0000, "RangeValue": "#31_$_60#Days" },
               { "Amount": 79.9900, "RangeValue": "#61_$_90#Days" },
               { "Amount": 3000.0000, "RangeValue": "Over_$_90" }
        ]

以下是我所做的编码..

       <!DOCTYPE html>
     <html>
      <head>
        <title>Pie labels</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link href="Portal/Content/kendo/2012.2.710/kendo.common.min.css"      rel="stylesheet" type="text/css" />
       <link href="Portal/Piechart/kendo.default.min.css" rel="stylesheet">
       <link href="Portal/Piechart/kendo.dataviz.min.css" rel="stylesheet">
       <link href="Portal/Piechart/kendo.dataviz.default.min.css" rel="stylesheet">
       <script src="Portal/Piechart/jquery.min.js"></script>
      <script src="Portal/Piechart/kendo.dataviz.min.js"></script>

    </head>
   <body>
       <div id="example" class="k-content">
       <div class="chart-wrapper">
           <div id="chart"></div>
         </div>
       <script>
        var CustomerData;
        var customername;

        var AgingData = [
                { "Amount": 239.9700, "RangeValue": "####below" },
                { "Amount": 4000.0000, "RangeValue": "#1_$_30#Days" },
                { "Amount": 5000.0000, "RangeValue": "#31_$_60#Days" },
                { "Amount": 79.9900, "RangeValue": "#61_$_90#Days" },
                { "Amount": 3000.0000, "RangeValue": "Over_$_90" }
            ]

        function BindData() {
            var Url = "http://localhost/CustomerPortal/get/agingchart/2013-12-01/90/30/Fabrikam/1/1?format=json";
            alert("start");
            CustomerData = new kendo.data.DataSource({
                transport: {
                    read: Url,
                    dataType: "json",
                    data: {
                        Accept: "application/json"
                    }

                },

            });
            CustomerData.read();//

            //createChart();
            CustomerData.fetch(function () {
                var view = CustomerData.at(0);
                customername = "Fabrikam";

            });

            $("#chart").kendoChart({
                title: {
                    text: customername + "   Customer Account Graph"
                },
                legend: {
                    position: "Right"
                },
                chartArea: {
                    background: ""
                },

                dataSource: {
                    data: CustomerData
                },
                seriesDefaults: {
                    labels: {
                        visible: true,
                        background: "transparent",
                        template: "#= category #: #= value#"
                    }
                },
                series: [{
                    type: "pie",
                    field: "Amount",
                    categoryField: "RangeValue"

                }],
                seriesColors: ["#42a7ff", "#E99669", "#A6D5A6", "#cccccc", "#E56f9f"],
                tooltip: {
                    visible: true,
                    template: "${ category } - ${ value }"
                }
            });//Chart close



        };

        $(document).ready(BindData);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>

请指导我如何获得带有远程json数据的饼图...

Answer 1

我对KendoUI也很新，但我相信你的问题点在这里：

data: {
    Accept: "application/json"
}

如果您需要操作传入的JSON数据以匹配Kendo正在查找的对象名称，我相信这个“数据”部分是必要的，在您的情况下为“Amount”和“RangeValue”。可能你确实需要操纵它。在那里放一个函数和一个断点来验证你的数据是好的：

data: function (e) {
    console.log(e.Amount); //breakpoint here to see
}

对我来说，该错误信息表明它没有按预期获得数组，或者它返回的对象数组格式不正确，因此无法按需要进行切片。

如何将Json远程数据绑定到Kendo饼图

1 个答案: