kendoUI Chart 如何获得wcf数据 并显示正常日期

效果如下：



我们用example里的例子做演示(examples\dataviz\line-chart\remotedata)：

1.首先我们需要定义的是数据源

var dataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: "http://localhost:3458/DataService/GetMetricCharts",

// JSONP is required for cross-domain AJAX
dataType: "jsonp",

// additional parameters sent to the remote service
data: {
aggregationType: '60-avg',
timeRange:'sel',
metricid:'34',
stDate:'2011-10-29T16:00:00.000Z',
enDate:'2012-02-08T02:25:55.196Z'

}
}
},
// describe the result format
schema: {
// the data which the data source will be bound to is in the "results" field
data: ""
}
});

2.然后将其绑定到chart的datasource属性上：

function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: dataSource,
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "line"
},
series:
[{
field: "m1",
name: "m1"
}],
categoryAxis: {
field: "DateTime",
labels: {
rotation: -90,
template: "#= formatDate(value) #"
},

},
valueAxis: {
labels: {
format: "{0:N0}"
},
//majorUnit: 50
},
tooltip: {
visible: true,
format: "{0:N0}"
}
});
}

3.修改series中的field属性，将其与wcf所传过来的值mapping，（lz的wcf传的是json）

4.将categoryAxis的field也定义好，这个是x轴的坐标。

5.x轴传得是时间，由于传回来的json时间数据是.NET DataTime，需要转换，lz参考了文章：http://www.kendoui.com/forums/ui/chart/kendo-ui-chart-category-field-dateformats.aspx，以及sencha touch 已有的方法，结合后引入sencha-touch.js文件，用里面内置的时间转换方法转的时间，代码如下:

function formatDate(dateString) {

var ticks=Date.parseDate(dateString, "M{1}quot;);
d = new Date(ticks);
return d.getDate() + "/"+
(d.getMonth() + 1) + "/" +
d.getFullYear().toString().substring(2,4)
};

于是有了上面最初的显示效果。

附引入的js及样式文件：

<link href="../../shared/styles/examples.css" rel="stylesheet"/>
<link href="../../shared/styles/examples-offline.css" rel="stylesheet"/>
<link href="../../../source/styles/kendo.common.css" rel="stylesheet"/>
<link href="../../../source/styles/kendo.default.css" rel="stylesheet"/>
<script src="../../../source/js/jquery.min.js"></script>
<script src="../../../source/js/kendo.core.js"></script>
<script src="../../../source/js/kendo.data.js"></script>
<script src="../../../source/js/kendo.chart.js"></script>