我是 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 数据的饼图...