0

我是 kendoui 应用程序的新手，我创建了一个饼图应用程序（为此，我放开了 kendoui Demo 示例。）当我运行 kendo 示例（远程 json 数据）时，它工作正常，但是当我使用我的 url 运行应用程序时，它给出了错误如下所示。

在此处输入图像描述

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

         [
               { "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 数据的饼图...

4

1 回答 1

0

我对 KendoUI 也很陌生，但我相信你的问题代码在这里：

data: {
    Accept: "application/json"
}

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

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

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

于 2013-12-09T14:57:06.870 回答