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

效果如下：

我们用example里的例子做演示(examplesdatavizline-chartremotedata)：

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: ""
					}
				});

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!